jQuery插件ajaxFileUpload异步上传文件


Posted in Javascript onOctober 19, 2016

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。
我用的是这个:https://github.com/carlcarl/AjaxFileUpload
下载地址在这里:http://xiazai.3water.com/201610/yuanma/ajaxfileupload(3water.com).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上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
清空上传控件input file的值
Jul 03 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 #Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 #Javascript
Angular2  NgModule 模块详解
Oct 19 #Javascript
You might like
php db类库进行数据库操作
2009/03/19 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
php swoft框架实例用法
2020/12/22 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
javascript 精粹笔记
2010/05/09 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
给领导的检讨书
2014/02/16 职场文书
连带责任保证书
2014/04/29 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL