日期:2014-05-16  浏览次数:20368 次

File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本 .

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最简单的调用:

?

[html] view plaincopyprint?
  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTDXHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"content="text/html;?charset=utf-8"?/>??
  5. <title>file?uploader</title>??
  6. <script?type="text/javascript"src="fileuploader.js"></script>??
  7. <link?rel="stylesheet"type="text/css"?href="fileuploader.css"/>??