您的位置：首页 > 其它

ajaxfileupload实现文件异步上传

2016-01-08 19:01 429 查看

首先需要下载js文件，提供一个CSDN的下载地址
http://download.csdn.net/detail/aa5000ac/5945203
其依赖于jquery，需要自行下载jquery.js文件

页面布局：

<html lang="zh-CN">
<head>
<script src="/assets/js/vendor/jquery.js"></script>
<script src="/assets/js/vendor/ajaxfileupload.js"></script>
</head>
<body>
<form id="form2" action="/system/upload" enctype="multipart/form-data" method="post">
<input type="file" id="file" name="file">
</form>
</body>
</html>

JS代码如下：

<script>
function ajaxFileUpload() {
$.ajaxFileUpload({
url:'/system/upload',
secureuri:false,
fileElementId:'file', //注意1
dataType: 'JSON',//注意2
success: function (data, status) {
alert(data)
},
error: function (data, status, e) {
}
});
}

$(function(){
$("#file").on('change',function(){
ajaxFileUpload();
});
})
</script>

其中需要注意的两点：

注意1 ：file指向文件上传的input 即

<input type="file" id="file" name="file">

其中name为必须，否则会出现后台接收不到文件的情况

注意2：dataType的值必须为大写，否则在chrome下回出现handlerError的异常，但是小写的"text"的例外。

在chrome下，ajax返回的JSON数据会出现多余的 “<pre style="word-wrap: break-word; white-space: pre-wrap;">” 现象，下面给出一个简易的处理方式

success: function (data, status) {
var index1 = data.indexOf("{");
var index2 = data.lastIndexOf("}");
data = data.substring(inde1,inde2+1);
},

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航