使用ajaxFileUpload实现文件上传

原创 2016年08月30日 10:39:23

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单。

1、引入AjaxFileUpload插件相关的js

<script type="text/javascript" src="${ctx}/resources/jquery/1.10.1/jquery.min.js"></script>
<script src="${ctx }/resources/jquery-fileupload/js/ajaxfileupload.js" defer="defer" type="text/javascript"></script>	

ajaxfileupload对jQuery版本是有要求的,在使用中ajaxfileupload和jQuery对应的js版本要一致,不然会导致异常发生。


语法:$.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

9,complete                                提交完成后执行的函数

错误提示:

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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。


<form id='data' enctype="multipart/form-data" method="post" class='hidden'>
		<input type='file' name='uploadFile'  id='uploadFile' >
</form>	

$.ajaxFileUpload({
        'url': "XXXXXXXXXXXXXXXX",
        'type': 'post',
        secureuri: false,
        'async': true,
        timeout: '150000',
        fileElementId: "uploadFile",
        dataType: 'json',
	success : function(data){
		console.log("success: "+ JSON.stringify(data));
		alert(JSON.stringify(data));
        	layer.alert("success");
	       	 if(data.status == 0){
	       		
	       	 }else{
	       		 alert("上传文件失败!");
	       	 }
	},
      error: function (e) {
       	   console.log("e:" + e);
       	   alert("上传文件失败!");
	 },
        complete: function (data) {
        	console.log("complete: "+ JSON.stringify(data));      		
	 }
	});

ps:

1、作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的。

如:正确的写法是<input type="file" id="file1" name="file1" />

2、Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'这个是google浏览器报的错误,非常经典, 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是:dataType参数一定要大写。如:dataType: 'HTML'。


相关资源:

http://yunzhu.iteye.com/blog/2177923

jQuery插件之ajaxFileUpload






spirgmvc+ajaxfileupload上传文件

spirgmvc+ajaxfileupload上传文件
  • wild46cat
  • wild46cat
  • 2016年10月04日 00:05
  • 537

struts1+ajax+jquery上传文件

项目里上传文件,都是常规form表单提交,本次有个需求需要上传,想着还是用ajax上传,用户使用起来比较好看,等待时间较短,网上查了资料,发现能够现成使用的较少,分析一下: 展现jsp: 引入文件: ...
  • zhangnana200
  • zhangnana200
  • 2016年07月14日 18:11
  • 1094

ajaxFileUpload.js 实现异步文件上传

使用iquery的插件ajaxFileUpload.js实现文件的异步上传。后台为java实现。
  • u011783224
  • u011783224
  • 2016年10月19日 18:44
  • 1653

IE9 IE10 使用ajaxFileupload文件上传不兼容问题

ajaxFileUpload链接地址https://github.com/carlcarl/AjaxFileUpload 需要将下面代码修改 源代码: if(window.ActiveXObje...
  • u013735544
  • u013735544
  • 2017年05月01日 10:11
  • 1083

SpringMVC与ajaxfileupload.js实现多个文件同时上传

SpringMVC与ajaxfileupload.js实现多个文件同时上传
  • ranger2
  • ranger2
  • 2016年08月31日 00:25
  • 1740

jQuery ajaxFileUpload文件上传之前端

1、html部分: 上传 浏览 ...
  • jsdxshi
  • jsdxshi
  • 2017年04月06日 10:52
  • 848

java文件上传--基于ajaxFileUpload+struts2

jQuery插件ajaxFileUpload可以实现ajax文件上传,使用非常简单。 下面做一个简单的demo(以上传图片为例),实现图片上传,图片显示,图片下载 $.ajaxFileUpload( ...
  • itmyhome
  • itmyhome
  • 2014年04月08日 15:55
  • 9800

freemarker+springMVC+ajaxfileupload实现异步图片上传(多张)

freemarker functi...
  • u013111003
  • u013111003
  • 2016年08月03日 21:03
  • 2475

AjaxFileUpload文件上传 及注意事项

文档目的: 介绍如何使用AjaxFileUpload插件在不刷新页面的情况下上传文件,并解决无法从服务器返回JSON数据的问题。        注意:如果需要这个具及这个工具的视频操作...
  • chen289251809
  • chen289251809
  • 2017年01月10日 15:35
  • 898

在ionic中用 ajaxfileupload.js 插件上传文件

1、定义一个file表单,并隐藏 附件 上传照片   注意事项: 1)、file控件在angular中没有所谓的“ng-change”事件,因此,只能使用“原生事件” 2)、...
  • hbiao68
  • hbiao68
  • 2016年09月07日 18:11
  • 293
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用ajaxFileUpload实现文件上传
举报原因:
原因补充:

(最多只允许输入30个字)