清除服务器上传队列的文件,webUploader上传demo

最近,要做文件上传功能,在同事推荐下,选择了webUploader插件。WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,详情请看官网(直接百度webUploader,应该是第一个)。挺好用的,于是小结一下。

1. 准备工作

1.1 先搭建服务,选用wamp/xamp或其他服务

1.2 下载webUploader 下载地址: https://github.com/fex-team/webuploader

2. 选用demo

62eca732b504e28dc5dbc4285039f07a.png

点击选择图片(其他文件也可以)就可以上传啦!

ad0523aea0b909b0713b219ab08ac7bf.png

遇到的几个问题

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才找到答案,原来是大文件没有切片导致啊!!!!

b3f0c4af3953e1b3ba642bb2b4ce88d0.png

解决办法: 在upload.js 中,uploader实例化的时候设置切片chunked: true,

4d2747bebbcedc1d797cc9efbc936277.png

在这位置,可以更改一些配置,如看”点击上传图片”不顺眼,想改成“上传文件”,就在pick那改。

还有的想把上传文件的大小限制改动下,也可以根据自己需求在这里的fileSizeLimit那里改。

fileNumLimit {int} [可选] [默认值:undefined] 验证文件总数量, 超出则不允许加入队列。

fileSizeLimit {int} [可选] [默认值:undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。

fileSingleSizeLimit {int} [可选] [默认值:undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。

改成切片后,再上传文件,

3839562c4680c6088e98b452cb267a08.png

成功! 完美。

那这里又存在一个疑问,那文件上传的位置在哪里更改呢?

在server/fileupload.php 中改targetDir和uploadDir

ae20cb34a8763f0ed60a81ab95de9bbb.png

在server/fileupload.php 中改targetDir和uploadDir

909301fbcf973b876cf0167bfeb99ae1.png

7629b51566bc4a98cab3221b5d792d07.png

a. 在上传文件前事件

//我自己的需求是,只能添加xml格式和zip格式文件

//webuploader.js

input.on( 'change', function( e ) {

var fn = arguments.callee,

clone;

//code

/**下面检测文件格式的方法不推荐!不推荐!!! (webuploader实例化中有配置)

在file 对象中有个ext属性是文件格式的,可以用。

*/

eb5ccbda7c074c6d2652a50000262a2b.png

上传前文件格式检测

在webuploader实例化那里可以配置,详情看官网文档

a36f0bd0125ada45ad5acd1908199ee2.png

我这里还有需要根据权限的不同去指定上传文件格式,我用个数组/字符串变量保存 (具体是字符串还是数组,请参看源码中怎么加,你就怎么加)

603ef20046bd07e2264ed11b50f9532e.png

287b02112d5aa1bafafb3d2e05a9f3a7.png

实际上在这里加,只是在你点击添加文件时,那个弹框就给你过滤了其他文件,留下你指定的文件类型。

如图。若用户吧把那个自定义文件下拉框换成全部文件,就可以添加其他文件了(刚刚自测了一把)。

33e2cbbb86d199f61525bb4330831239.png

显然,这与我们需求不符,uploader实例化配置accept只是个简单的过滤而已,

所以还是得在文件添加到控件中,就自己检测。(个人觉得,就按我上面的那样,一旦用户添加进来了,就里面检测,添加不通过直接打回去)

b. 根据自己需求要在上传前做验证

//在662行左右,点击时做验证

$upload.on('click', function() {

if ( $(this).hasClass( 'disabled' ) ) {

return false;

}

d1af9029fa41b133a66199e62bcf3048.png

c. 获取已添加的所有文件对象

//有时需要把所有文件做个判断啥的,就需要用到

var fileItem = uploader.getFiles();

//要文件添加进去了,才有用。在刚刚添加文件时,是无效的。

//uploader是一个实例

d. 上传时,携带自定义参数

//见uploader实例化

uploader.options.formData.houseName = houseName;

uploader.options.formData.houseType = houseType;

uploader.options.formData.address = district;

//添加到实例化后就可以了,

e95e2af3fe6df86b1afe147a02e9e017.png

e94c47955953d71130c188508411f072.png

//地址瞎写的,

e. 上传大图片被压缩,而其他文件没有问题

之前自己检测过,上传大文件(非图片)到服务器上,与上传前文件对比大小,是没有问题的。 但是今天同事说,他传的图片(8M)被压缩(400kb左右)了,刚刚开始还不信,毕竟之前自己检测过,上传后的文件和原文件的大小一致。 后来查官方文档才知道真被压缩了。 文档是这么说的

27c0602c1b6488c26837b83b9dc76c0d.png

解决办法: 在uploader实例化的时候,加个参数 compress: false;

9. uploader.removeFile( file, true )无效, 执行getFiles()删除的文件还在file数组里

测试给我提个单,说删除有问题。

额·····

后来自己定位到,在点击删除时,执行到uploader.removeFile(file), 居然只是从视图中删除了? 没从file数组删除????

什么鬼?

a60f074f85472d767cd16a3fc1176ff4.png

后来查官方API,说只要把removeFile()方法后面加个true就可以了。然并卵。。。。

再去github issue查,这种问题还真有好几个,

efbb937061c1beaa8eaef373854b755d.png

只要在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 ) { 调用下就好了

b90325e43d361fa4365dd26d2375cba3.png

最后附上一张gif,不骗你们啦~~

2fb6e588a48ac4474cf499c4c677ce96.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HappyLeetcode64:Sqrt(x)

Implement int sqrt(int x). 这道题本质上是求sqrt(x)下最大的整数。二分查找是比较容易想到的方法。另&#xff0c;在网上又学习了下别人的牛顿迭代法。 这是我原来的写法&#xff0c;写入是错误的&#xff0c;复杂度太高 class Solution { public:int sqrt(int x) {if (x <…

德云斗笑社何九华为什么没参加_狗狗的身体卡在了门上,女主人低头一看忍不住笑了:这是膨胀了...

大家应该有看过长得像煤气罐一样体型圆圆的狗狗吧&#xff1f;它们可能是因为疾病导致的&#xff0c;也可能是被主人喂得过于肥胖了。这个故事中的狗狗被过分宠溺&#xff0c;才短短的几个月&#xff0c;它居然画风突变&#xff0c;不禁想问这是去参加宠物变形记了吗&#xff1…

服务器绑定域名可修改吗,云服务器可以绑定域名吗

云服务器可以绑定域名吗 内容精选换一换访问IIS搭建的网站不通&#xff0c;报错404。IIS上绑定的域名只填写了主机名&#xff0c;没有指定IP地址。本节操作指导用户修改IIS上绑定的域名&#xff0c;以Windows Server 2008 R2操作系统云服务器为例。登录服务器&#xff0c;选择“…

杭州保俶塔实验机器人_【科教有闻】高照实验学校Pepper机器人课程亮相2020(杭州)国际数字教育大会“智能教育引领未来”论坛...

“数化世间万物&#xff0c;一切皆有可能”&#xff0c;数字经济时代的教育新画卷正在浙江杭州徐徐展开。12月10日至11日&#xff0c;2020(杭州)国际数字教育大会(2020iDEE)在杭州国际博览中心正式开幕&#xff0c;这是一场关乎数字和创新的盛宴&#xff0c;也是一次洞见未来教…

hdu2795 Billboard 线段树

题意&#xff1a; 给出一块h*w的广告牌&#xff0c;还有n张1*u的海报&#xff0c;海报尽量往上&#xff0c;左边的位置张贴&#xff0c;问每一张海报能贴的多高。 线段树单点修改。 注意&#xff1a;因为1 < h,w < 10^9; 1 < n < 200,000&#xff0c;但实际上&…

实现iframe_面试官:来说说单点登录的三种实现方式

前言在 B/S 系统中&#xff0c;登录功能通常都是基于 Cookie 来实现的。当用户登录成功后&#xff0c;一般会将登录状态记录到 Session 中&#xff0c;或者是给用户签发一个 Token&#xff0c;无论哪一种方式&#xff0c;都需要在客户端保存一些信息&#xff08;Session ID 或 …

iphone投屏老是显示无法连接服务器,iPhone 无法投屏到电视如何解决?

使用投屏功能&#xff0c;可以在更大的屏幕上显示 iPhone 画面&#xff0c;将游戏画面、电影等从手机转移到电视屏幕&#xff0c;体验会更好。在 iOS 11 之前&#xff0c;使用 iPhone 自带的 AirPlay 功能&#xff0c;就可以轻松在智能电视上实现投屏。AirPlay 是苹果独有的无线…

帕累托最优生活例子_创业者:用博弈解决生活的难题

博弈策略的成功运用需依赖一定的环境、条件&#xff0c;在一定的博弈框架中进行。许多成语及典故&#xff0c;都是对博弈策略的令人叫绝的运用和归纳。成语故事“黔驴技穷”实际上就包含了一个不完全信息动态博弈。毛驴刚到贵州时&#xff0c;老虎摸不准这个大动物究竟有多大本…

电脑海尔电脑,海尔台式电脑好吗,海尔主机

最近有朋友询问海尔自带Win10系统使用不习惯&#xff0c;如何改成Win7系统的问题&#xff0c;这里小编向大家提供下方法&#xff0c;海尔台式机目前大多使用8代、9代intel处理器&#xff0c;改成Win7除了BIOS需要设置为兼容模式外&#xff0c;还需要你的Win7安装盘具备USB3.0/3…

《软件测试技术》课程第二周随笔

这次的博客内容为&#xff0c;举例解释等价类划分。 1. 问题描述 EditBox 在文本输入框内输入文字&#xff0c;然后按确认键。 允许接收的文字为&#xff1a;1至6个英文字符或数字。 2.等价类划分 有效等价类编号无效等价类编号包括的字符a-z,A-Z,0-91其他字符3字符串长度1-620…

图片句柄_PC微信逆向:自动保存加密的聊天图片

前言本文基于anhkgg大佬的文章《微信PC端技术研究(2)-拿下语音》原文链接&#xff1a;https://bbs.pediy.com/thread-249274.htmanhkgg大佬的这篇文章找到了保存语音消息的接口&#xff0c;这里直接给出相关特征码&#xff0c;方便定位(我使用的微信版本依旧是2.6.8.52)偏移为0…

Unity手游之路十自动寻路Navmesh之跳跃,攀爬,斜坡

转载 Unity手游之路<十>自动寻路Navmesh之跳跃,攀爬,斜坡 分类&#xff1a; unity2013-12-27 00:50 6545人阅读 评论(5) 收藏 举报unity3dNavmesh手游自动寻路在之前的几篇Blog总&#xff0c;我们已经系统学习了自动寻路插件Navmesh的相关概念和细节。然而&#xff0c;如…

热点分析图_通过分析功率MOSFET管的工作特性,判断其损坏原因

0 前言目前&#xff0c;功率 MOSFET管广泛地应用于开关电源系统及其它的一些功率电子电路中&#xff0c;然而&#xff0c;在实际的应用中&#xff0c;通常&#xff0c;在一些极端的边界条件下&#xff0c;如系统的输出短路及过载测试&#xff0c;输入过电压测试以及动态的老化测…

显示多个页面退出登陆_软件测试小白如何第一次登陆时给LINUX的配置网络

接着上一期分享&#xff0c;今天分享的是虚拟机配置完成以后我们接下来怎么做首先我们进入终端登录以后先显示的是user用户点击user输入密码&#xff0c;回车或者点击sigh ln第一次进入会让你选择语音&#xff0c;你可以根据自己的喜好决定如果安装的可视化界面&#xff0c;你的…

原理 msc_计算机网络原理梳理丨无线与移动网络

目录无线网络移动网络IEEE802.11蜂窝网络移动IP网络其它典型无线网络介绍无线网络无线网络的基本结构无线主机无线链路基站网络基础设施自组织网络(Ad Hoc网络)无线链路与无线网络特性无线链路与有线链路主要区别&#xff1a;1.信号强度的衰弱2.干扰3.多径传播4.隐藏终端移动网…

二维数组最大子数组和

一&#xff0e;实验题目 求一个二维数组中和最大的子数组。 二&#xff0e;实验思路 基于我们第一次合作时求的一位数组最大子数组&#xff0c;加上一层循环来遍历二维数组中的所有子矩阵的情况。 第一步&#xff1a;先利用上次的方法求每一行的情况&#xff0c;将每行结果存入…

木炭怎么获得_木炭机一体化流程中制做木炭是怎么完成的

关注我们获得更多精彩内容木炭机一体化流程中制做木炭是怎么完成的&#xff0c;木炭机生产线中炭化炉是核心设备。炭化炉炭化过程决定了木炭质量和效果。木炭机生产线中炭化过程需要经历三个不同温度阶段。三个不同温度阶段对薪棒的炭化作用不同。炭化好坏标志着木炭机制炭效果…

【转载】网易将军令工作原理

最近开始玩梦幻手游&#xff0c;为了领以前端游的返利必须输入将军令&#xff0c;那个已经一年没用了&#xff0c;输入了几次都提示错误&#xff08;后来证实是系统繁忙而已&#xff09;&#xff0c;我以为是将军令时间不对了&#xff0c;所以用了下官网的修复功能。也对将军令…

返回数据_多层数据返回匹配值

↑↑↑点击上方图片&#xff0c;了解详情Access Switch函数示例&#xff0c;分享源码。一、问题描述&#xff1a;想实现如下功能&#xff0c;发现用iff嵌套方式太复杂&#xff0c;有没有更简单的方法&#xff1f; A1≤750 返回5.0 750&#xff1c;A1≤865 返回5.…

HDU1114 Piggy-Bank 完全背包

题意&#xff1a; 给出一个存钱罐的空罐时的质量和装了钱之后的质量&#xff0c;再给出一些硬币的质量和相应的价值&#xff0c;问存钱罐里的钱最少可能为多少。 这道题就是完全背包的问题&#xff0c;注意初始化。 完全背包与01背包不同的是第二次遍历的时候要顺序而已。 初始…