收藏个支持进度条与文件拖拽上传的js File Uploader
File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本
目录(?)[+]
- client目录
- server目录
File Uploader的前身是Ajax Upload。按照官方的说法,升级到FileUploader主要是添加了一些新的特性,修正了一些比较严重的错误。但在我这个使用者看来,二者最大的不同在于:File Uploader不在基于jQuery。另外,File Uploader也更加严格,例如返回值只能是JSON格式,等。Ajax Upload中一些需要写到后台服务器上的代码(如上传文件的格式筛选),或者对前端DOM的操作(如onSubmit、onComplete事件中自定义的代码等),都直接集成到了File Uploader的JS脚本中。总的说来,File Uploader是一款功能强大的JS文件上传插件,支持显示上传进度、文件拖拽到浏览器中上传、多文件上传、页面无刷新、无序多余插件、跨浏览器、跨后台语言等等特性。
官方网站如下:
http://valums.com/ajax-upload/
下载的文件目录结构如下图所示:
其中可供使用的是client目录和server目录下的若干文件:
client目录
fileuploader.js:主要JS脚本文件,前端的所有功能都在该脚本中实现。必需。使用时需要通过<script>标签导入到HTML文件中;
fileuploader.css:提供JS脚本中所需的CSS样式,主要包括按钮的样式、进度显示的样式以及上传结果的样式。必需。需要通过<link>标签导入HTML文件中;
loading.gif:进度显示所需的动态图片文件。必需。在fileuploader.css文件中被调用。
server目录
该目录提供的是服务器端代码的示例程序,包括:
基于Servlet实现的Java代码:OctetStreamReader.java
基于PHP的实现:php.php
基于Perl的实现:perl.cgi
三者择其一即可。
下面这段代码是前端对File Uploader最简单的调用:
- <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
- <title>file uploader</title>
- <script type="text/javascript"src="fileuploader.js"></script>
- <link rel="stylesheet"type="text/css" href="fileuploader.css"/>
- <script type="text/javascript">
- window.onload = function() {
- new qq.FileUploader({
- element:document.getElementById("uploader"),
- action:"http://localhost/fileUpload/save.php",
- });
- }
- </script>
- </head>
- <body>
- <div id="uploader"></div>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>file uploader</title>
<script type="text/javascript"src="fileuploader.js"></script>
<link rel="stylesheet"type="text/css" href="fileuploader.css"/>
<script type="text/javascript">
window.onload = function() {new qq.FileUploader({element:document.getElementById("uploader"),action:"http://localhost/fileUpload/save.php",});
}
</script>
</head><body>
<div id="uploader"></div>
</body>
</html>
前端的一般的步骤是:
1. 导入fileuploader.js、fileuploader.css脚本;
2. 实例化qq.FileUploader对象
qq.FileUploader的参数数组中包含如下属性:
element:加载FileUploader插件的DOM元素,通过DOM操作获取,通常是<div>,也可以是任何块级元素标签,如<span>、<p>等,必需;
action:服务器端接受并保存文件的程序路径,与<form>标签中的action属性类似,必需;
params:需要发送给服务器端的额外数据,key-value格式的数组,通过POST方法发送,格式如下:
params: {
param1: “value1”,
param2: “value2”
}
allowedExtensions:允许上传的文件的后缀名数组,格式如下:
allowedExtensions: [‘jpg’, ‘gif’, ‘bmp’, ‘png’]
sizeLimit:上传文件大小的上限,单位为byte的数值(浏览器不一定支持本设置);
minSizeLimit:上传文件大小的下限,单位为byte的数值(浏览器同样不一定支持);
debug:是否使用浏览器的控制台打印File Uploader的调试信息,默认为false;
另外,参数数组中还包含了4个事件处理函数可供实现(非必需):
文件提交:onSubmit: function(id, fileName) {}
正在上传:onProgress: function(id, fileName, loaded, total) {}
上传完成:onComplete: function(id, fileName, responseJSON) {}
取消上传:onCancel: function(id, fileName) {}
其中的参数:
id,表示是第几个上传的文件,从0开始计数;
fileName,表示上传的文件名称;
loaded,表示已经上传了的数据大小;
total,表示总共的文件大小;
responseJSON,表示返回的JSON数据。
参数数组中还包含了消息处理函数以及params的其它设置方法,不太常用,详情页参见官方文档。
后台服务器端如果想省事,可以直接使用server目录下的相应代码,或按照官方给的示例改写代码。
需要特别说明的是:
1. 加载FileUploader插件的DOM元素element,其样式在脚本中已经固定了,就算是在给element设置了新的样式也会被覆盖掉。如果想修改element的样式,需要在fileuploader.js的487行到491行(template处)以及对应的fileuploader.css样式中修改。
2. 同理,如果想修改进度显示的样式,需要在fileuploader.js的494行到500行(fileTemplate处)以及对应的fileuploader.css样式中修改。
3. 如果出现“increase post_max_size and upload_max_filesize to 10M”错误,需要在php.ini文件中把post_max_size和upload_max_filesize两项的值改到10M以上,然后重启Apache。
4. FileUploader上传的文件数据信息,Java通过HttpServletRequest对象获取,并能直接从中抽取数据流,不用管索引值;而PHP则通过$_FILES数组获取,默认的索引值为“qqfile”,该索引值在fileuploader.js文件的964行与1197行指定,也可以在这些地方修改(虽然没有必要)。
5. 服务器端代码中设置文件保存路径的位置:PHP:php.php文件的第160行;Java:OctetStreamReader.java文件的第102行。
转载于:https://www.cnblogs.com/gaoxue/archive/2012/09/20/2694990.html
收藏个支持进度条与文件拖拽上传的js File Uploader相关推荐
- html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...
- 使用dropzone实现文件拖拽上传功能
前端代码,关于dropzone的配置我写在注释里了 <html> <head><meta charset="utf-8" /><%@inc ...
- html拖动文件读取文件内容,HTML5新功能之文件拖拽上传
当我们使用邮箱添加附件时,会看到提示我们将文件放到相应区域,如图: 当我们将拖拽文件悬停在相应区域后会进一步提示我们,放下鼠标,如图: 下面我们将进一步的了解下此过程,并实现该效果. 首先我们先了解下 ...
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装 下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
- php dropzone.js中文教程,JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装 下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
- HTML5文件拖拽上传记录
1 JS文件: 2 var FileName = ""; 3 var FileStr = ""; 4 (function () { 5 function $id ...
- php拖拽上传大文件,如何实现文件拖拽上传
拖拽选择文件 屏蔽默认事件 刚开始的时候,是在网上找了一个例子,这个例子中提到,需要在document上屏蔽和drag相关的所有事件的默认处理方式,代码如下:$(document).on({ drag ...
最新文章
- 一条命令下载google壁纸,含错误解决方法
- Linux修改主机名的方法
- Node学习9-gulp
- Vuex——命名空间导致错误[unknown action type:XXX]解决方案
- php调用linux摄像头,Linux_在Linux操作系统上使用摄像头,我的公家笔记本的摄像头一直 - phpStudy...
- oracle之trunc(sysdate)
- Youtube最佳Red5 官方视频下载指南,字幕【亲测成功】
- “一学就会”微服务的架构模式
- 7-11 求链式线性表的倒数第K项 (20 分)
- CMMI中的过程改进
- 【C++】结构体变量与结构体指针大小区别(Socket sendto函数)
- 几何视角下的线性代数(3)---基与特征
- 条件期望与全期望公式
- php流量统计代码_用php编写的简单的网站流量统计程序
- 微型计算机机箱配什么显卡,CPU显卡搭配建议
- linux电脑滚轮不能用,图文详解电脑鼠标滚轮不动了怎么办_电脑鼠标滚轮不能用的三种解决方法-系统城...
- Unity3d跨场景背景音乐和场景切换加载界面的设置!
- Windows系统下的PDF编辑工具软件-PDF编辑器下载
- re:Invent最重磅的演讲,AWS CEO透露了哪些关键信息?
- 5分钟快速从无到有建立Ethereum联盟链
热门文章
- C++结构体,联合体与枚举类
- 基础Floyd--任意两点间最短路
- [paper reading] Faster RCNN
- 安卓activity生存周期的onCreate、onRestoreInstanceState、onRestart、onStart、onResume、onPause、onStop、onDestroy
- jquery表单选择器input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:button、:file、:hidden
- 创建数组-直接法/增量法 namelengthmax isvarname iskeyword
- hibernate 并发获取session失败 空指针_高并发之|通过ThreadPoolExecutor类的源码深度解析线程池执行任务的核心流程...
- 2019 杭电多校第六场 题解
- Apache Camel,Spring Boot 实现文件复制,转移 (转)
- Elasticsearch 日期时间处理