视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery上传插件webupload使用方法
2020-11-27 22:33:39 责编:小采
文档

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。

这个插件很好用,功能也比较强大,比ajaxfileupload要强大,可去官方网站下载。

目前项目中只用到了图片批量上传功能,官方示例已经写的很详细了,下面介绍下如何把官方示例迁移到自己的项目中:

// 实例化
 uploader = WebUploader.create({
 pick: {
 id: '#filePicker',
 label: '点击选择图片'
 },
 formData: {
 uid: 123
 },
 dnd: '#dndArea',
 paste: '#uploader',
 swf: '../../dist/Uploader.swf',
 chunked: false,
 chunkSize: 512 * 1024,
 server: '../../server/fileupload.php',
 // runtimeOrder: 'flash',

 // accept: {
 // title: 'Images',
 // extensions: 'gif,jpg,jpeg,bmp,png',
 // mimeTypes: 'image/*'
 // },

 // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
 disableGlobalDnd: true,
 fileNumLimit: 300,
 fileSizeLimit: 200 * 1024 * 1024, // 200 M
 fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
 });

1、server  修改为自己的后台处理类 通过 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; request.Files的方式获取插件上传的图片。

2、示例程序默认是启用压缩的,这个可以设置,当图片大于多少是可以自动压缩图片的,如果不需要压缩,则需要再初始化的时候添加 compress:false, 属性

3、

accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 },

官方上传图片的示例不知道什么原因把图片筛选这个注释掉了,如果想上传的文件只能选择图片,则需要去掉注释

4、增加了对图片像素大小的判断,自己用了uploadAccept 方法,是把图片提交上去了之后再后台进行判断的,(不知是否有更好的办法)因为插件本身的file类是可以处理文件的,所以并没有单独获取像素的属性,示例:

 uploader.on('uploadAccept', function (object, ret) {
 
 var resJson = $.parseJSON(ret._raw);
 if (resJson.result == "error") {
 alert(object.file.name + "象素太低,请检查上传!");
 return false;
 }
 
 });

该方法返回false的时候,会导致图片上传失败,所以后台判断像素后通过后台返回的状态来改变图片上传的状态。

 

下载本文
显示全文
专题