jQuery插件ajaxFileUpload异步上传文件

时间:2020-05-15 琴剑山庄人气:0

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。
我用的是这个：https://github.com/carlcarl/AjaxFileUpload
下载地址在这里：http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar

AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。

评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。

ajaxFileUpload是一个异步上传文件的jQuery插件

传一个不知道什么版本的上来，以后不用到处找了。

语法：$.ajaxFileUpload([options])

options参数说明：

1、url　　　　　　　　　　上传处理程序地址。　　
2，fileElementId　　　　　需要上传的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　是否启用安全提交，默认为false。
4，dataType　　　　　　　服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error　　　　　　　　　提交失败自动执行的处理函数。
7，data 　　　　　　　　　自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 　　　　　　　　　当要提交自定义参数时，这个参数要设置成post

错误提示:

1、SyntaxError: missing ; before statement错误
　　如果出现这个错误就需要检查url路径是否可以访问
2、SyntaxError: syntax error错误
　　如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3、SyntaxError: invalid property id错误
　　如果出现这个错误就需要检查文本域属性ID是否存在
4、SyntaxError: missing } in XML expression错误
　　如果出现这个错误就需要检查文件name是否一致或不存在
5、其它自定义错误
　　大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

使用方法：

第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

 <script src="jquery-1.7.1.js" type="text/javascript"></script>
 <script src="ajaxfileupload.js" type="text/javascript"></script>

第二步：HTML代码：

<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

第三步：JS代码

 <script src="jquery-1.7.1.js" type="text/javascript"></script>
 <script src="ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 ajaxFileUpload();
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
 url: '/upload.aspx', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议，一般设置为false
 fileElementId: 'file1', //文件上传域的ID
 dataType: 'json', //返回值类型 一般设置为json
 success: function (data, status) //服务器成功响应处理函数
 {
 $("#img1").attr("src", data.imgurl);
 if (typeof (data.error) != 'undefined') {
 if (data.error != '') {
 alert(data.error);
 } else {
 alert(data.msg);
 }
 }
 },
 error: function (data, status, e)//服务器响应失败处理函数
 {
 alert(e);
 }
 }
 )
 return false;
 }
 </script>

第二个例子

使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.

分析原因：

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单再将要上传的文件写上去再提交.但是原代码却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:

备注:好像csdn代码中加颜色加粗有问题这三处修改的地方我直接贴出来,位置看下面的代码,

①createUploadForm: function(id, fileElementId,data);

②if (data) {
        for (var i in data) {
            $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
        }
    }

③var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单再将要上传的文件写上去再提交.但是原代码却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
备注:好像csdn代码中加颜色加粗有问题这三处修改的地方我直接贴出来,位置看下面的代码,

createUploadForm: function(id, fileElementId,data);

if (data) { 
 for (var i in data) { 
 $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
 } 
 }

var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

如何使用它呢？

$.ajaxFileUpload({
url: 'http://localhost:8080/HNUST/crawler/ordinary2', 
type: 'post',
data : {
url : url,
keyword : keyword,
rule : rule,
data : data,
sign:sign
},
secureuri: false, //一般设置为false
fileElementId: 'file', // 上传文件的id、name属性名
dataType: 'JSON', //返回值类型，一般设置为json、application/json 这里要用大写 不然会取不到返回的数据
success: function(data, status){ 
alert(data);
},
error: function(data, status, e){ 
alert(e);
}
});

html：
<input type="file" id="file" name="file">
java：java后台获取参数还是正常获取:

String url=request.getParameter("url");
String keyword=request.getParameter("keyword");

获取文件并分行读取(非图片):

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
MultipartFile multipartFile = multipartRequest.getFile("file"); //这个file要与fileElementId一致

try {
InputStream inputStream=multipartFile.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
String tempString = null;

// 一次读入一行，直到读入null为文件结束
while ((tempString = reader.readLine()) != null) {
fileList.add(tempString); 
}
} catch (IOException e2) {
// TODO Auto-generated catch block
e2.printStackTrace();
}

使用过程中有两点需要注意的地方：
其一，dataType必须要大写；
其二，在data的值要写成json的格式，否则后台无法接受参数

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

加载全部内容