AjaxFileUpload.js异步上传文件教程及常见错误排查

AjaxFileUpload插件原理与语法

在进行软件开发作业时，若需实现图片无刷新异步上传至服务器，通常会考虑使用Ajax技术。

初步思路是获取文件域的value值，随后通过POST请求发送数据。

然而在实际开发中发现，直接获取file元素的value值无法实现文件上传。

经过查阅资料，找到了一款封装完善的JavaScript插件，专门用于处理异步文件上传。

该插件名为AjaxFileUpload。

其核心原理是动态创建隐藏的表单与iframe，并通过JavaScript触发提交动作，最终获取服务器返回的结果。

语法

$.ajaxFileUpload([options])

参数说明

url：指定处理上传请求的后端地址。 fileElementId：指定需要上传的文件输入框的ID，即input file元素的ID。 secureuri：布尔值，控制是否启用安全协议提交，默认值为false。 dataType：定义服务器返回数据的类型，支持xml、script、json或html。若未指定，jQuery会自动推断。 success：定义提交成功后的回调函数，参数data接收服务器返回的数据。 error：定义提交失败时的回调函数。 data：用于传递自定义参数。当需要上传与图片相关的附加数据时，此参数尤为重要。 type：当需要提交自定义参数时，需将此参数设置为post。

AjaxFileUpload使用示例

使用方法

首先需在页面中引入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 = '';//SK
Qiniu_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 it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( 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事件后，后续不再触发。

原因：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"
   });
 }
 })   
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

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

AjaxFileUpload插件原理与语法

AjaxFileUpload使用示例

七牛云存储上传实现

常见错误与解决方案

实用工具推荐