基于jquery的上传文件插件ajaxUpload

以前做web端时用到一个上传文件的插件ajaxupload，主要用于上传图片和文档，没有试过上传视频，这里给大家分享一下。插件可以到网上下载。

1，引入jquery和ajaxupload，

<script src="jquery-1.11.3.min.js"></script>
<script src="ajaxupload.3.9.js"></script>

2，定义上传函数，修改一些配置（可以写在页面的script标签里，也可以写在插件里）
//上传图片
$.fn.uploadImg= function(options) {
var opts = $.extend({}, $.fn.uploadImg.defaults, options);
return this.each(function(){
var _$this=$(this);
new AjaxUpload(_$this, opts);
})
}
$.fn.uploadImg.defaults={
action: '',//文件上传的接口
name: 'file',//参数名
filesize:6291456,//文件大小，计算公式：1M=1024*1024*1
outsize:'您上传的图片大小超过了6M，请选择合适的图片！',/*文件超出提示*/
onSubmit: function (fil, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG|GIF|gif|png|PNG)$/.test(ext))) {//判断文件格式，可以是图片或者文档，但是没有上传过视频。
alert('图片格式不正确,请选择正确图片的文件!');
return false;
}else{
return true;
}
},
onComplete:function(file, response){

}
};

uploadImg是函数名，可以更改，调用时保持一致即可。

action是上传文件的接口。

name是参数字段。

filesize是文件大小，计算公式：1M=1024*1024*1。

onSubmit是获取文件，这里要判断文件的类型，是图片还是文档等，

onComplete是上传后的回调。（不需要做改动）

3，调用上传函数。

html代码

<button id="imgUpload">点击上传图片</button>js代码调用
<script type="text/javascript">
$('#imgUpload').uploadImg({
onComplete: function (file, response) {
//response就是上传后返回的数据。
}
}
});
</script>

response是上传后返回的数据，可以在这里进行数据处理。

4处理既上传图片又上传文档。之前开发项目时，同一个页面既要上传图片又要上传文档，有两种选择。

4.1，可以在判断文件类型里把图片和文档的格式都写上，这样就支持两者了。但是有个小问题，就是对图片和文档的大小不能分开处理了，比如图片要求在6M以内，文档在20M以内，只能以一个大小来判断了。

4.2，粗暴一点方法就是定义两个函数，一个是上传图片的：$.fn.uploadImg=function....，一个是上传文档的：$.fn.uploadFile=function....，这样配置就可以分开修改了，上传图片就调用上传图片的函数，上传文档就调用上传文档的函数。