关闭

使用ajaxFileUpload实现文件上传

124人阅读 评论(0) 收藏 举报
分类:

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






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:124959次
    • 积分:1800
    • 等级:
    • 排名:千里之外
    • 原创:224篇
    • 转载:151篇
    • 译文:1篇
    • 评论:7条
    文章分类
    最新评论