试用体验网站,关于网站的设计和制作,企业网站配色绿色配什么色合适,实体店会员卡管理系统最近#xff0c;要做文件上传功能#xff0c;在同事推荐下#xff0c;选择了webUploader插件。WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主#xff0c;FLASH为辅的现代文件上传组件#xff0c;详情请看官网(直接百度webUploader#xff0c;应该是第…最近要做文件上传功能在同事推荐下选择了webUploader插件。WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主FLASH为辅的现代文件上传组件详情请看官网(直接百度webUploader应该是第一个)。挺好用的于是小结一下。1. 准备工作1.1 先搭建服务选用wamp/xamp或其他服务1.2 下载webUploader 下载地址: https://github.com/fex-team/webuploader2. 选用demo点击选择图片(其他文件也可以)就可以上传啦遇到的几个问题1. 上传稍微大一点(10M)的文件可能会有点问题文件名被改文件也会出错。文件被重命名成file_*2. 限制上传文件大小等配置3. 上传文件至服务器地址修改 (自定义)4. 在上传文件前事件4.1 上传前文件格式检测5. 根据自己需求要在上传前做验证6. 获取已添加的所有文件对象7.上传时携带自定义参数8.上传大图片被压缩而其他文件没有问题9. uploader.removeFile( file, true )无效 执行getFiles()删除的文件还在file数组里上传稍微大一点(10M)的文件可能会有点问题文件名被改文件也会出错。文件被重命名成file_*例如:file_58f4a2fc7dde0, 这问题也困扰我很久在github webUploader的issue里也发现有人有同样的问题https://github.com/fex-team/webuploader/issues/263 但是我这里是没有解决。后来查找官方API才找到答案原来是大文件没有切片导致啊解决办法: 在upload.js 中uploader实例化的时候设置切片chunked: true,在这位置可以更改一些配置如看”点击上传图片”不顺眼想改成“上传文件”就在pick那改。还有的想把上传文件的大小限制改动下也可以根据自己需求在这里的fileSizeLimit那里改。fileNumLimit {int} [可选] [默认值undefined] 验证文件总数量, 超出则不允许加入队列。fileSizeLimit {int} [可选] [默认值undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。fileSingleSizeLimit {int} [可选] [默认值undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。改成切片后再上传文件成功 完美。那这里又存在一个疑问那文件上传的位置在哪里更改呢在server/fileupload.php 中改targetDir和uploadDir在server/fileupload.php 中改targetDir和uploadDira. 在上传文件前事件//我自己的需求是只能添加xml格式和zip格式文件//webuploader.jsinput.on( change, function( e ) {var fn arguments.callee,clone;//code/**下面检测文件格式的方法不推荐不推荐 (webuploader实例化中有配置)在file 对象中有个ext属性是文件格式的可以用。*/上传前文件格式检测在webuploader实例化那里可以配置详情看官网文档我这里还有需要根据权限的不同去指定上传文件格式我用个数组/字符串变量保存 (具体是字符串还是数组请参看源码中怎么加你就怎么加)实际上在这里加只是在你点击添加文件时那个弹框就给你过滤了其他文件留下你指定的文件类型。如图。若用户吧把那个自定义文件下拉框换成全部文件就可以添加其他文件了(刚刚自测了一把)。显然这与我们需求不符uploader实例化配置accept只是个简单的过滤而已所以还是得在文件添加到控件中就自己检测。(个人觉得就按我上面的那样一旦用户添加进来了就里面检测添加不通过直接打回去)b. 根据自己需求要在上传前做验证//在662行左右点击时做验证$upload.on(click, function() {if ( $(this).hasClass( disabled ) ) {return false;}c. 获取已添加的所有文件对象//有时需要把所有文件做个判断啥的就需要用到var fileItem uploader.getFiles();//要文件添加进去了才有用。在刚刚添加文件时是无效的。//uploader是一个实例d. 上传时携带自定义参数//见uploader实例化uploader.options.formData.houseName houseName;uploader.options.formData.houseType houseType;uploader.options.formData.address district;//添加到实例化后就可以了//地址瞎写的e. 上传大图片被压缩而其他文件没有问题之前自己检测过上传大文件(非图片)到服务器上与上传前文件对比大小是没有问题的。 但是今天同事说他传的图片(8M)被压缩(400kb左右)了刚刚开始还不信毕竟之前自己检测过上传后的文件和原文件的大小一致。 后来查官方文档才知道真被压缩了。 文档是这么说的解决办法: 在uploader实例化的时候加个参数 compress: false;9. uploader.removeFile( file, true )无效 执行getFiles()删除的文件还在file数组里测试给我提个单说删除有问题。额·····后来自己定位到在点击删除时执行到uploader.removeFile(file), 居然只是从视图中删除了 没从file数组删除什么鬼后来查官方API说只要把removeFile()方法后面加个true就可以了。然并卵。。。。再去github issue查这种问题还真有好几个只要在webuploader.js 中加几行代码就好。1. 在webuploader.js 中搜到 function Queue() 方法2. 在里面添加 删除方法_delFile : function(file){for(var i this._queue.length-1 ; i 0 ;i-- ){if(this._queue[i] file){this._queue.splice(i,1);break;}}},然后再在removeFile: function( file ) { 调用下就好了最后附上一张gif不骗你们啦~~
