首页 > 开发 > AJAX > 正文

AjaxFileUpload.js实现异步上传文件功能

2024-09-01 08:34:00
字体:
来源:转载
供稿:网友

做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax:

得到file的val,再post过去…

等真正实现的时候才发现,根本行不通。

于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。

AjaxFileUpload

这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值。

语法

$.ajaxFileUpload([options])

参数说明 

url           上传处理程序地址。 
fileElementId      需要上传的文件域的ID,即的ID。 
secureuri        是否启用安全提交,默认为false。 
dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。 
success        提交成功后自动执行的处理函数,参数data就是服务器返回的数据。 
error          提交失败自动执行的处理函数。 
data           自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。 
type           当要提交自定义参数时,这个参数要设置成post

使用方法

引入jQuery与ajaxFileUpload插件(由api中心强力提供)

<script type="text/javascript" src="https://api.mayuko.cn/js/jquery.min.js"></script><script type="text/javascript" src="https://api.mayuko.cn/js/ajaxfileupload.js"></script>

扩展HTML代码

<td height="52" class="inputContent" ><div align="center">附件1<input type="file" name="upload_file" id="ss_upload_file1"></td><td colspan="3"><input type="button" name="Submit3" value="上 传" class="button" id="ss_file_upload"></td>

JS代码

$("#ss_file_upload").click(function(){  $.ajaxFileUpload({ url:'doajaxfileupload.php',//请求地址 secureuri:false,//是否需要安全协议 fileElementId:'ss_upload_file1',//file的ID dataType: 'text',//返回值类型,一般为json success: function(img_data1)//成功后执行 { $(ss_file1_url).attr("value",img_data1); alert("上传成功"); }, error:function(img_data1,status,e){  alert("上传失败");  } })})

PHP代码

后台就是进行上传操作啦,因为是课程设计所以我将图片上传到了七牛云存储中。

如何上传到七牛中?

<?php//echo var_dump($_FILES);//echo $_FILES['upload_file']['tmp_name'];$file_infor = array("status"=>'',"url"=>'');require_once("qiniu/io.php");require_once("qiniu/rs.php");$bucket = "";//你的bucket$key1 = $_FILES["upload_file"]["name"] ;$accessKey = '';//AK$secretKey = '';//SKQiniu_SetKeys($accessKey, $secretKey);$putPolicy = new Qiniu_RS_PutPolicy($bucket);$upToken = $putPolicy->Token(null);$putExtra = new Qiniu_PutExtra();$putExtra->Crc32 = 1;list($ret, $err) = Qiniu_PutFile($upToken, $key1,$_FILES["upload_file"]["tmp_name"], $putExtra);$url='bucket域名'.$key1;if ($_FILES["upload_file"]["error"] > 0){$file_infor["status"] = 'error';}else{$file_infor["status"] = 'success';$file_infor["url"] = $url;}echo $url;?>

$_FILES是一个数组:

array (‘upload_file' =>array (‘name' => ‘733626970332872971.jpg',‘type' => ‘image/jpeg',‘tmp_name' => ‘C://Windows//Temp//phpF203.tmp',‘error' => 0,‘size' => 210744,),)

这样前台就可以接收到上传图片之后的url值并进行显示操作了。

一般来说,AjaxFileUpload的返回类型是json格式,可是在测试的时候前台一直无法解析json数据,所以无解之后就换成text数据了。

错误提示

1.Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError'

这是因为高版本的jQuery中取消了handleError方法,在ajaxfileupload.js中加入该方法就可以啦。 ;)

handleError: function( s, xhr, status, e ) {// If a local callback was specified, fire itif ( s.error ) {s.error.call( s.context || s, xhr, status, e );}// Fire the global callbackif ( s.global ) {(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );}}

2.success: function(data)中data为空值

应该是json数据的问题,我的解决方法是设置返回数据的类型是 text,用alert(data +”:” + data.length); 观察返回的数据是否有效。

3.一直跳转到error方法中

当执行if(type==”json”) eval(“data = “+data);会抛出异常,导致在处理异常的时候将status = “error” 因此一直执行error方法。

将ajaxfileupload.js中uploadHttpData: function( r, type ) 方法的 eval(“data = “+data+” “)改为 eval(“data = /” “+data+” /” “);

4.SyntaxError: syntax error错误

检查处理提交操作的服务器后台处理程序是否存在语法错误。

5.change第二次失效

绑定change事件,实现选择图片后自动上传,但是触发一次change事件后,下次就不会再触发change事件。

原因:由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了。

解决方法:在 $.ajaxFileUpload({option})中的回调函数里 重新绑定change事件。

 

$("#upload_file").change(function(){  UploadImg();});UploadImg = function() { $(window).bind('beforeunload',function(){return '正在上传,确定离开此页面吗?';}); $('#loading').attr('style','display:block;') $.ajaxFileUpload({ url:'upload_ajax.php', secureuri:false, fileElementId:'upload_file', dataType: 'text', success: function(data) {  $('#loading').attr('style','display:none;');  if(data == 0){   $("body").overhang({   type: "error",   message: "上传失败,CODE:00020"   });  }  else if(data == 1){   $("body").overhang({   type: "success",   message: "上传成功!"   });   setTimeout(function(){      window.location.reload();    },1000);  }  else{   $("body").overhang({   type: "error",   message: "格式错误,仅支持jpg,png,gif"   });  }  $(window).unbind('beforeunload');  $("#upload_file").change(function () {    UploadImg();  }); }, error:function(data,status,e){    $("body").overhang({   type: "error",   message: "上传失败,CODE:00031"   }); } })   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有0条评论
用户名: 密码:
验证码: 匿名发表