php ajaxfileupload.js 使用,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中心强力提供)

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

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

如何上传到七牛中？

//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"

});

}

})

}

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