使用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






相关文章推荐

js使用AjaxFileupload插件实现文件上传

最近做项目,需要上传表单元素中的文件POST到目标URL,并把得到的数据显示到本页面上,而不跳转到目标URL。那么,现在就要明确两件事: 1)不能直接提交表单,因为一旦点击submit就会自动跳转到a...

jQuery使用ajaxfileupload插件实现ajax文件上传

function ajaxFileUpload(){ $.ajaxFileUpload( { ...
  • maojunm
  • maojunm
  • 2014年03月04日 14:26
  • 496

Ajax实现文件上传(使用jQuery插件之ajaxFileUpload)

需求: 上传图片并表单域中的参数值。 准备:Jquery的插件 ajaxFileUpload下载地址-->http://files.cnblogs.com/files/kissdodog/ajaxfi...

AjaxFileUpload实现多文件上传

去年5月中旬在项目中使用过Ajax上传文件(一直都在飘,也就最近两周开始写博客了),现在要使用的时候不得不再去看过去的代码了,我是将原本的 AjaxFileUpload 单文件改成了多文件上传的,虽然...
  • lsg9012
  • lsg9012
  • 2015年01月29日 17:45
  • 371

ajaxFileUpload+struts2实现多文件上传

单文件上传参考:http://blog.csdn.net/itmyhome1990/article/details/23187087 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileu...

jQuery插件AjaxFileUpload实现文件上传

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法。 使用说...

浏览器图片\文件上传到服务器 ajaxfileupload.js使用实例

在电商项目中经常遇到图片或者文件上传的需求,但是现在的浏览器为了安全起见都封闭了file控件上传的本地绝对路径,所以我用一个js插件完成上传需求 现在我把我写的代码拿出关键部分当个例子分享给大家,希望...

使用ajaxfileupload.js进行文件上传,出现的问题以及解决办法

使用ajaxfileupload.js 上传文件,出现的问题。1、handleerror is not a function 2、文件可以上传成功,但是不走success回调函数解决办法。...
  • demored
  • demored
  • 2017年03月15日 21:06
  • 1243
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用ajaxFileUpload实现文件上传
举报原因:
原因补充:

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