清除服务器上传队列的文件,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
点击选择图片(其他文件也可以)就可以上传啦!
遇到的几个问题
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和uploadDir
a. 在上传文件前事件
//我自己的需求是,只能添加xml格式和zip格式文件
//webuploader.js
input.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,不骗你们啦~~
清除服务器上传队列的文件,webUploader上传demo相关推荐
- 文件服务器无法上传资料,该文件未上传至服务器怎么回事
该文件未上传至服务器怎么回事 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. W ...
- Java连接FTP服务器并且实现对其文件的上传和下载
概述 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".FTP作为网络共享文件的传输协议,在网络应用软件中具有广泛的应用.F ...
- Java使用SFTP和FTP两种连接服务器的方式实现对文件的上传下载
一.Java实现对SFTP服务器的文件的上传下载: 1.添加maven依赖: <dependency><groupId>com.jcraft</groupId>&l ...
- java 断点上传_java HTTP文件断点上传
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- nginx java文件上传_Nginx实现文件的上传和下载
文件的上传只要保证特殊的地址先到达Nginx,然后通过Nginx指定至指定的服务器即可,目前配置是本机.文件的下载的做法就是把本机的当前目录下面的文件给返回回去. server { listen ; ...
- php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
- php 上传.doc .docx文件,无法上传doc和docx文件
在这里我试图上传pdf,doc和docx文件. PDF文件正在上传,但doc和docx文件未上传.我在form标记中保留了enctype="multipart/form-data" ...
- java批量上传文件_Spring Boot2(十四):单文件上传/下载,文件批量上传
文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...
- Spring MVC + Java 多文件上传及多文件中转上传
1.html内容 <div><form method="post" action="/Cyberspace/main/informationBatchA ...
最新文章
- Java 20年:历史与未来
- PHP基础系列之正则表达式(一)
- EDP项目结构规范心得
- php文件上传指定路径,php上传文件到指定文件夹
- 语句拼接_Linux 进阶语句
- 【华为云技术分享】初识MySQL隔离级别
- codevs 1729 单词查找树
- mysql get global_getdata table表格数据join mysql方法
- 快速ping_PING你真的会用么?
- 南开100题C语言(031-040)
- java生成水印图片
- 如何在Linux中克隆一个分区或者硬盘驱动器
- 关于中医把脉的一点想法
- Origin中画折线图实现双X轴和双Y轴(双坐标轴)
- AU软件导出mp3为pcm文件
- puppeteer在linux上模拟浏览器截图——截取微信公众号文章全文实例
- 一些笔记本电脑的简单配置和价格
- Jmeter 压测工具
- MATLAB:指定坐标轴范围、轴向、位置
- 3D智慧仓储可视化解决方案
热门文章
- Java创建一个学生类
- Java 中 finally 与 return 的执行顺序详解
- 计算机无法连接无线信号,win7系统连接无线信号时提示Windows无法连接到路由器名称的四种解决方法...
- gateway动态路由_无语!SpringCloud Gateway动态路由之Nacos,我已经讲得很清楚了
- sql语句 int(11)含义误区
- django与grpc融合的过程
- Python格式化函数format详解
- Python3中遇到UnicodeEncodeError: 'ascii' codec can't encode characters in ordinal not in range(128)...
- iOS开发之通知中心(NSNotificationCenter)
- 多个 App 间启动