[fileupload资料.docxVIP

File Uploader：支持进度显示与文件拖拽的多文件上传前端JS脚本 分类： JavaScript 2012-03-11 19:20 2893人阅读 评论(11) 收藏 举报 fileuploadfunction脚本服务器浏览器目录(?)[+]File Uploader的前身是Ajax Upload。按照官方的说法，升级到FileUploader主要是添加了一些新的特性，修正了一些比较严重的错误。但在我这个使用者看来，二者最大的 不同在于：File Uploader不在基于jQuery。另外，File Uploader也更加严格，例如返回值只能是JSON格式，等。Ajax Upload中一些需要写到后台服务器上的代码（如上传文件的格式筛选），或者对前端DOM的操作（如onSubmit、onComplete事件中自定 义的代码等），都直接集成到了File Uploader的JS脚本中。总的说来，File Uploader是一款功能强大的JS文件上传插件，支持显示上传进度、文件拖拽到浏览器中上传、多文件上传、页面无刷新、无序多余插件、跨浏览器、跨后 台语言等等特性。官方网站如下：/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最简单的调用：[html] view plaincopy!DOCTYPE?html?PUBLIC?-//W3C//DTDXHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtd?html?xmlns=/1999/xhtml?head?meta?http-equiv=Content-Typecontent=text/html;?charset=utf-8?/?titlefile?uploader/title?script?type=text/javascriptsrc=fileuploader.js/script?link?rel=stylesheettype=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的数值（浏览器同样不