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

2023-08-24 10:01:05 159

做软工作业时，需要实现无刷新异步上传图片到服务器，于是想利用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中心强力提供）

扩展HTML代码

附件1

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代码

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

如何上传到七牛中？

'',"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=newQiniu_RS_PutPolicy($bucket);
$upToken=$putPolicy->Token(null);
$putExtra=newQiniu_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.UncaughtTypeError:Objectfunction(a,b){returnnewe.fn.init(a,b,h)}hasnomethod‘handleError'

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

handleError:function(s,xhr,status,e){
//Ifalocalcallbackwasspecified,fireit
if(s.error){
s.error.call(s.context||s,xhr,status,e);
}

//Firetheglobalcallback
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:syntaxerror错误

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

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"
});
}
elseif(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实现异步上传文件功能

热门推荐

随机推荐