jQuery插件ajaxFileUpload异步上传文件

编辑：rootadmin

推荐整理分享jQuery插件ajaxFileUpload异步上传文件，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。我用的是这个：下载地址在这里：　　　　　　　　　　上传处理程序地址。　　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插件。注意先后顺序，这个不用说了，所有的插件都是这样。

第二步：HTML代码：

第三步：JS代码

第二个例子

使用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代码中加颜色加粗有问题这三处修改的地方我直接贴出来,位置看下面的代码,

如何使用它呢？

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

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

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

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

标签: jQuery插件ajaxFileUpload异步上传文件

本文链接地址:https://www.jiuchutong.com/biancheng/379341.html 转载请保留说明！

上一篇：jQuery实现点击任意位置弹出层外关闭弹出层效果(jquery的点击事件怎么写)

下一篇：jQuery插件ajaxFileUpload使用实例解析