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行。
相关推荐
NULL 博文链接:https://chenwes.iteye.com/blog/1525161
jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传,预览,删除,初始化控件,图片赋值加载,获取图片数据。压缩包包含jquery-weui.uploader.js,weui以及示例demo
NULL 博文链接:https://mojianpo.iteye.com/blog/753665
flask-file-uploader, 在 python Flask 上使用jQuery文件上传,上传的上传网站脚本 flask-file-uploader描述File文件,支持 python Flask 和 jQuery-File-Upload插件,包括多个文件选择,拖放支持,进度条,验证和...
Uploader是非常强大的异步文件上传组件,支持ajax、iframe、flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证、图片预览、进度条等,广泛应用于淘宝网,比如退款系统、...
#H5FileUploader 用于html5文件上传的插件 ####测试 下载文件夹测试 使用npm install安装nodejs软件包 然后运行node index.js 打开浏览器,输入http://127.0.0.1:1103 #### Config < script src =' H5...
JS-文件上传器 一个轻量级、独立于框架、跨浏览器的 HTML5 XMLHttpRequest 文件上传脚本,带有进度更新。 Chrome、Firefox、Safari 和 IE 10+ 兼容。 ##使用 var uploader = new FileUploader('...
简单的React文件上传器 Simple React File Uploader是用于上传多个或单个文件的React组件。新的功能! 支持拖放。 单个或多个文件。 该组件将仅从UI组件获取多个文件或单个文件,并返回数组“ onChange”事件。安装$...
由驱动的Vue.js上传组件 特征 将文件夹和文件视为File 暂停/继续上传 恢复上传 错误处理 使用文件夹阅读器拖放 自定义上传按钮 资料夹上载 队列管理 文件验证 上传进度 剩余时间 块上传 安装 npm install vue-...
该文件包内包含jquery.fineuploader3.7.1.js和fineuploader.css 该包用于用户学习、使用关于文件上传相关的内容时下载。
fileuploader:漂亮而强大HTML文件上传工具。 一个jQuery,PHP和Node.js插件,可将标准输入转换为页面上具有革命性的精美字段
安装在Gemfile中: gem 'rails-uploader'在航线上: mount Uploader :: Engine => '/uploader' 迁移ActiveRecord: $ bundle exec rails g uploader:install用法存储上传文件的架构(cancan集成): class Asset <...
文件传输SDK文档 引入方式 建议使用ES6引入。 import {Uploader, FileStatus} from 'power-uploader'; Uploader:文件传输SDK的构造类 FileStatus:文件实例的状态 INITED:初始状态(beforeFileQueued事件之后就会...
Angular文件上传器是Angular 2+文件上传器模块,具有实时进度栏和Angular Universal Compatibility。 ###安装 npm install angular-file-uploader ###用法 需要Bootstrap.min.css。 包括< link rel =" ...
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。...两套运行时,同样的...采用大文件分片并发上传,极大的提高了文件上传效率。 uploader.swf用于webuploader的初始化
'instructionsCopy':'你可以选择或拖拽多个文件', 'submitButtonCopy':'上传选择的文件', 'furtherInstructionsCopy':'你可以选择或拖拽更多的文件', 'secondarySelectButtonCopy':'选择更多的文件', }...
Cute WebUI AjaxUploader注册文件(AjaxUploader.lic) AjaxUploader.lic 注册版文件,测试可用。
AJAX 文件上传处理程序 用 PHP 和 JavaScript 编写 具有用于上传进度的进度条 基于教程
轻松执行程序化的多部分文件上传。 设计用于测试套件中。 用法 var uploader = require ( 'file-uploader' ) var file // set to the path of the file you want to upload var cookie // set a cookie if you ...