AjaxFileUpload.js实现异步上传文件功能
做软工作业时，需要实现无刷新异步上传图片到服务器，于是想利用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 = '';//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事件后，下次就不会再触发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"
});
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。