本文主要介绍AjaxFileUpload.js异步上传文件的功能，具有一定的参考价值。感兴趣的朋友可以参考一下。
做软工作时，需要异步上传图片到服务器，不需要刷新，所以要用Ajax:
获取文件的val，然后发布它…
真正实现的时候，根本不可行。
于是我翻箱倒柜找了一个打包的js插件，可以异步上传文件。
AjaxFileUpload
这个插件的原理是创建隐藏表单和iframe，然后用JS提交得到返回值。
语法
$.ajaxFileUpload([options])
参数描述
Url上传处理程序地址。
FileElementId是需要上传的文件域的Id，即的ID。
secureuri是否启用安全提交，默认值为false。
数据类型服务器返回的数据类型。可以是xml，脚本，json，html。如果不填写，jQuery会自动判断。
提交成功后自动执行的处理功能。参数数据是服务器返回的数据。
错误：提交失败时自动执行的处理函数。
数据自定义参数。这个东西很有用，有上传图片相关数据的时候会用到。
提交自定义参数时，此参数应设置为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/Ajax file upload . js '/script
扩展HTML代码
TD height=' 52 ' class=' input content ' div align=' center '附件1
输入类型='文件'名称='上载文件' id=' ss _上载文件1'/td
Tdspan=' 3 '输入类型=' button ' name=' submit 3 ' value=' upload ' class=' button ' id=' ss _ file _ upload '/TD
javascript，javascript
$('#ss_file_upload ')。单击(函数(){
$.ajaxFileUpload({
Url:'doajaxfileupload.php '，//请求地址
Secureuri:false，//需要安全协议吗？
FilelementID:' ss _ upload _ file1 '，//文件的ID
数据类型：' text '，//返回值类型，通常是json
成功：函数(img_data1)//成功后执行
{
$(ss_file1_url)。attr('value '，img _ data1)；
警报(“上传成功”)；
},
错误：函数(img_data1，状态，e){
警报(“上传失败”)；
}
})
})
PHP代码
就是后台的上传操作。因为是课程设计，所以我把图片上传到了七牛云存储。
怎么上传到七牛？
？服务器端编程语言（Professional Hypertext Preprocessor的缩写）
//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=“”；//你的桶
$ key 1=$ _ FILES[' upload _ file '][' name ']；
$ access key=“”；//AK
$ secret key=“”；//SK
Qiniu_SetKeys($accessKey，$ secret key)；
$ put policy=new Qiniu _ RS _ put policy($ bucket)；
$upToken=$putPolicy-Token(空)；
$ putExtra=new Qiniu _ putExtra()；
$ putExtra-Crc32=1；
list($ret，$err)=Qiniu_PutFile($upToken，$key1，$ _ FILES[' upload _ file '][' tmp _ name ']，$ put extra)；
$url='存储桶域名'。$ key1
if($ _ FILES[' upload _ file '][' error ']0){
$ file _ infor[' status ']=' error '；
}
否则{
$ file _ infor[' status ']=' success '；
$ file _ infor[' URL ']=$ URL；
}
echo $ url
？
$_FILES是一个数组：
数组(
upload_file'=
数组(
name'='733626970332872971.jpg '，
type'='image/jpeg '，
' tmp _ name '=' C:\ \ Windows \ \ Temp \ \ phpf 203 . tmp '，
误差'=0，
size'=210744，
),
)
这样前台就可以在上传图片后接收url值并显示。
一般来说AjaxFileUpload的返回类型是json格式，但是前台在测试的时候一直无法解析json数据，所以无解之后改成了文本数据。
错误提示
1.未捕获的类型错误：对象函数(a，b){return new e.fn.init(a，b，h)}没有方法“handleError”
这是因为在更高版本的jQuery中已经取消了handleError方法，在ajaxfileupload.js中添加这个方法就足够了；)
handleError:函数(s，xhr，status，e ) {
//如果指定了本地回调，则触发它
如果(错误){
s.error.call( s.context || s，xhr，status，e)；
}
//触发全局回调
如果（全球){
(s。上下文？jQuery(s.context) : jQuery.event).trigger( 'ajaxError '，[xhr，s，e])；
}
}
2 .成功：功能（数据)中数据为空值
应该是json数据的问题，我的解决方法是设置返回数据的类型是文字，用alert(data ":" data。长度)；观察返回的数据是否有效。
3.一直跳转到错误方法中
当执行if(type==" JSON ")eval(" data=" data)；会抛出异常，导致在处理异常的时候将状态="错误"因此一直执行错误方法。
将ajaxfileupload.js中uploadHttpData: function( r，type)方法的eval("data=" data " ")改为eval(" data=\ " " data " \ " ")；
4.语法错误：语法错误错误
检查处理提交操作的服务器后台处理程序是否存在语法错误。
5 .改变第二次失效
绑定变化事件，实现选择图片后自动上传，但是触发一次变化事件后，下次就不会再触发变化事件。
原因：由于ajaxFileUpload把原来的文件元素替换成新的文件元素，所以之前绑定的变化事件就失效了。
解决方法：在$.ajaxFileUpload({option})中的回调函数里重新绑定变化事件。
$('#upload_file ').change(function(){
上传img()；
});
UploadImg=function() {
$(窗口)。绑定('卸载前'，函数(){return '正在上传，确定离开此页面吗？'；});
$('#loading ').attr('style '，' display:block；')
$.ajaxFileUpload({
url:'upload_ajax.php '，
假的，
fileElementId:'上传文件，
数据类型："文本",
成功：功能（数据)
{
$('#loading ').attr('style '，' display:none；');
if(data==0){
$('body ').突出({
类型："错误",
消息： '上传失败，代码：00020 '
});
}
else if(data==1){
$('body ').突出({
类型："成功",
消息： '上传成功!'
});
setTimeout(function(){
窗户。位置。重载()；
},1000);
}
否则{
$('body ').突出({
类型："错误",
消息： '格式错误，仅支持' jpg，png，gif '
});
}
$(窗口)。解除绑定(‘卸载前’)；
$('#upload_file ').change(function () {
上传img()；
});
},
错误：函数（数据，状态，e){
$('body ').突出({
类型："错误",
消息： '上传失败，代码：00031 '
});
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。