以前做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....,这样配置就可以分开修改了,上传图片就调用上传图片的函数,上传文档就调用上传文档的函数。