今天给大家推荐一款简单好用文件上传插件,才3kb, 啥也不说,直接上正文吧,你也可以直接跳到 5、如何获取 下载
1、简介
jquery.attach.js 是一款基于HTML5 formData开发的异步上传jquery插件,功能强大,使用方便,轻量级。支持图片、文件、文档等附件上传。jquery.attach.js 非常小,压缩前不到3kb。,支持文件检验,支持上传回调和出错回调,附加参数,支持多实例。
2、hello word
在helloword.html 引入如下js 即可
一帮调用方法
var options={
///****
}
$(“.uploaddom”)..attachsvr(options)
举例如下
<script src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js” ></script>
//引入插件
<script src=”jquery.attach.js” ></script>
<script>
$(function(){
$(“:input[type=’file’]”).attachsvr({
onComplete:function(json){
$(“#divUploadWrap”).css(“background-image”,”url(“+json.data.fileurl+”)”)
$(“#fileuri”).val(json.data.fileid);
console.log(“callback”,json);
},
onProgress:function(xhr){
console.log(“progress,在这里可以添加loading 效果”,parseInt(xhr.loaded/xhr.totalSize*100)+”%”)
},
onCheck:function(file){
console.log(file);
return true;
},
onError:function(e){console.log(“error”,e)},
ctxData:{
“参数1″:”参数1的值”,
“参数2″:”参数2”,
},
script:”upload.php”,
uploadkey:”fileupload”,
filetype:[“.jpg”,”.png”,”.jpeg”,”.zip”,”.mp3″,”.mp4″]
});
});
</script>
3、参数说明
参数名称 | 参数描述 |
script | 处理上传的接口地址,譬如upload.php |
ctxdata | 上传到script 参数地址时,可能会需要额外的参数,在此以json格式提供,如 {arg1:”arg1″,arg2:”arg2″} |
uploadkey | 上传文件到script 脚本处时,制定传输的文件数据的key如 $_FILES[“fileupload”],默认为fileupload |
filetype | 数组,支持上传的文件类型,默认为 [“.jpg”,”.png”,”.jpeg”,”.zip”,”.mp3″,”.mp4″] |
onCheck | 在开始上传之前,会调用该函数,一般用来校验文件是否合法 function(file){return true;} 类型回调,入参是 上传的jquery file 对象 返回true,标识通过校验,返回false 标识没有通过,用户可以在此函数下做检测 |
onComplete | 当上传完成后,调用该函数, function(json){ } 类型回调, 入参json是script 连接处提供的脚本返回值 用户可以在此函数下做上传成功后的处理 |
onError | 当传输和逻辑处理发生错误时,attach会调用该函数 function(r){},入参数说明 1、网络传输错误时,返回r,内容 { “result”:”errornet”, “msg”:”网络通讯错误”, “data”:{“XMLHttpRequest”:XMLHttpRequest,”textStatus”:textStatus,”errorThrown”:errorThrown} } 其中 {“XMLHttpRequest”:XMLHttpRequest,”textStatus”:textStatus,”errorThrown”:errorThrown} 和ajax error 返回的数据保持一致 2、上传的文件类型不支持时,返回 {“result”:”notsurport”,”msg”:”这个文件类型不支持”,”data”:{}} |
onProgress | 用户处理上传进度,function(xhr){} 类型回调, xhr 是XMLHttpRequest 类型,注意,其中XMLHttpRequest 有俩个重要的属性loaded(已经上传字节数)和totalSize(该文件总字节数),我们一般用来计算进度 |
4、注意事项
该插件基于 html5 form data ,因此只有支持formdata 的浏览器才会支持该插件,如有问题 ,请联系我,本人qq 271151388
5、如何获取,点击如下 按钮下载即可