Uploadify是一个Jquery框架下处理批量文件上传的插件,支持多种服务器端软件。
文档:http://www.uploadify.com/documentation/
今天根据文档写了个批量上传的的功能..
下面直接进入主题:
界面效果:
界面代码:
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
- <%
- String path = request.getContextPath();
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>Uploadify上传</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <link rel="stylesheet" href="uploadify/uploadify.css" type="text/css"></link>
- <script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
- <script type="text/javascript"
- src="uploadify/jquery.uploadify-3.1.min.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#file_upload").uploadify({
- 'height' : 27,
- 'width' : 80,
- 'buttonText' : '浏 览',
- 'swf' : '<%=path%>/uploadify/uploadify.swf',
- 'uploader' : '<%=path%>/servlet/UploadifySerlet',
- 'auto' : false,
- 'fileTypeExts' : '*.xls',
- 'formData' : {'userName':'','qq':''},
- 'onUploadStart' : function(file) {
- //校验
- var name=$('#userName').val();
- if(name.replace(/\s/g,'') == ''){
- alert("名称不能为空!");
- return false;
- }
- //校验
- var qq=$('#qq').val();
- if(qq.replace(/\s/g,'') == ''){
- alert("QQ不能为空!");
- return false;
- }
- $("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
- //$("#file_upload").uploadify("settings", "qq", );
- }
- });
- });
- </script>
- </head>
- <body>
- 名称: <input type="text" id="userName" name="userName" value="妞见妞爱">
- <br>
- QQ: <input type="text" id="qq" name="qq" value="609865047">
- <br>
- <input type="file" name="uploadify" id="file_upload" />
- <hr>
- <a href="javascript:$('#file_upload').uploadify('upload','*')">开始上传</a>
- <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上传</a>
- </body>
- </html>
关于各个参数的介绍,网上也有很多。。我们也可以在 jquery.uploadify-3.1.js 中找到。
- var settings = $.extend({
- // Required Settings
- id : $this.attr('id'), // The ID of the DOM object
- swf : 'uploadify.swf', // The path to the uploadify SWF file
- uploader : 'uploadify.php', // The path to the server-side upload script
- // Options
- auto : true, // Automatically upload files when added to the queue
- buttonClass : '', // A class name to add to the browse button DOM object
- buttonCursor : 'hand', // The cursor to use with the browse button
- buttonImage : null, // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button
- buttonText : 'SELECT FILES', // The text to use for the browse button
- checkExisting : false, // The path to a server-side script that checks for existing files on the server
- debug : false, // Turn on swfUpload debugging mode
- fileObjName : 'Filedata', // The name of the file object to use in your server-side script
- fileSizeLimit : 0, // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit)
- fileTypeDesc : 'All Files', // The description for file types in the browse dialog
- fileTypeExts : '*.*', // Allowed extensions in the browse dialog (server-side validation should also be used)
- height : 30, // The height of the browse button
- method : 'post', // The method to use when sending files to the server-side upload script
- multi : true, // Allow multiple file selection in the browse dialog
- formData : {}, // An object with additional data to send to the server-side upload script with every file upload
- preventCaching : true, // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters)
- progressData : 'percentage', // ('percentage' or 'speed') Data to show in the queue item during a file upload
- queueID : false, // The ID of the DOM object to use as a file queue (without the #)
- queueSizeLimit : 999, // The maximum number of files that can be in the queue at one time
- removeCompleted : true, // Remove queue items from the queue when they are done uploading
- removeTimeout : 3, // The delay in seconds before removing a queue item if removeCompleted is set to true
- requeueErrors : false, // Keep errored files in the queue and keep trying to upload them
- successTimeout : 30, // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading
- uploadLimit : 0, // The maximum number of files you can upload
- width : 120, // The width of the browse button
上面是默认的设置。。。
服务器端代码:
- package com.yangpan.uploadify;
- import java.io.File;
- import java.io.FileOutputStream;
- import java.io.IOException;
- import java.io.InputStream;
- import java.io.OutputStream;
- import java.io.PrintWriter;
- import java.text.SimpleDateFormat;
- import java.util.Arrays;
- import java.util.Date;
- import java.util.Iterator;
- import java.util.List;
- import java.util.Random;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.commons.fileupload.FileItem;
- import org.apache.commons.fileupload.FileUploadException;
- import org.apache.commons.fileupload.disk.DiskFileItemFactory;
- import org.apache.commons.fileupload.servlet.ServletFileUpload;
- public class UploadifySerlet extends HttpServlet {
- /**
- *
- */
- private static final long serialVersionUID = 1L;
- //上传文件的保存路径
- protected String configPath = "attached/";
- protected String dirTemp = "attached/temp/";
- protected String dirName = "file";
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- this.doPost(request, response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- request.setCharacterEncoding("UTF-8");
- response.setContentType("text/html; charset=UTF-8");
- PrintWriter out = response.getWriter();
- //文件保存目录路径
- String savePath = this.getServletContext().getRealPath("/") + configPath;
- // 临时文件目录
- String tempPath = this.getServletContext().getRealPath("/") + dirTemp;
- SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
- String ymd = sdf.format(new Date());
- savePath += "/" + ymd + "/";
- //创建文件夹
- File dirFile = new File(savePath);
- if (!dirFile.exists()) {
- dirFile.mkdirs();
- }
- tempPath += "/" + ymd + "/";
- //创建临时文件夹
- File dirTempFile = new File(tempPath);
- if (!dirTempFile.exists()) {
- dirTempFile.mkdirs();
- }
- DiskFileItemFactory factory = new DiskFileItemFactory();
- factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时,将产生临时文件并存储于临时目录中。
- factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。
- ServletFileUpload upload = new ServletFileUpload(factory);
- upload.setHeaderEncoding("UTF-8");
- try {
- List items = upload.parseRequest(request);
- Iterator itr = items.iterator();
- String name = "";
- String qq = "";
- while (itr.hasNext()) {
- FileItem item = (FileItem) itr.next();
- String fileName = item.getName();
- long fileSize = item.getSize();
- if (!item.isFormField()) {
- String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
- SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
- String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
- try{
- File uploadedFile = new File(savePath, newFileName);
- /*
- * 第一种方法
- *
- * 好处: 一目了然..简单啊...
- * 弊端: 这种方法会导致上传的文件大小比原来的文件要大
- *
- * 推荐使用第二种
- */
- //item.write(uploadedFile);
- //--------------------------------------------------------------------
- //第二种方法
- OutputStream os = new FileOutputStream(uploadedFile);
- InputStream is = item.getInputStream();
- byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
- int length = 0;
- while( (length = is.read(buf)) > 0 ){
- os.write(buf, 0, length);
- }
- //关闭流
- os.flush();
- os.close();
- is.close();
- System.out.println("上传成功!路径:"+savePath+"/"+newFileName);
- out.print("1");
- }catch(Exception e){
- e.printStackTrace();
- }
- }else {
- String filedName = item.getFieldName();
- if (filedName.equals("userName")) {
- name = item.getString();
- }else {
- qq = item.getString();
- }
- System.out.println("FieldName:"+filedName);
- System.out.println("String:"+item.getString("UTF-8"));//避免中文乱码
- //System.out.println("String():"+item.getString(item.getName()));
- System.out.println("===============");
- }
- }
- } catch (FileUploadException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- out.flush();
- out.close();
- }
- }
WEB.XML
- <servlet>
- <servlet-name>UploadifySerlet</servlet-name>
- <servlet-class>
- com.yangpan.uploadify.UploadifySerlet
- </servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>UploadifySerlet</servlet-name>
- <url-pattern>/servlet/UploadifySerlet</url-pattern>
- </servlet-mapping>
基本设置
swf:主要Flash文件路径,默认uploadify.swf,如果同调用文件在同一不目录下可以忽略
uploader:后台处理程序路径,默认uploadify.php
postData:传递参数,默认{}
auto:是否允许自动上传文件,默认false
method:传递参数方式,默认post
外观设置
width:按钮宽度,默认120
height:按钮高度,默认30
buttonClass:按钮样式设置,如:样式为.btnClass{color:red;}
buttonCursor:鼠标移入时指针样式,默认hand,(注:设置后不知道怎么显示)
buttonImage:按钮显示图片地址,默认false,(注:必须是高度2倍,包含两个按钮图片,上默认、下鼠标移入,IE9)
buttonText:按钮显示文字信息,默认SELECT FILES,(注:3.0.0版本支持中文)
cancelImage:取消选中文件图片,默认uploadify-cancel.png
fileTypeDesc:选择文件时文件类型提示,默认All Files (*.*)
fileTypeExts:选择文件时文件类型限制,默认*.*,(注:如果fileTypeDesc和fileTypeExts同时设置,则显示组合,如:All Files (*.*) (*.*)
多个类型如:“*.JPG;*.GIF;*.PNG;*.BMP”)
操作设置
queueID:上传队列容器ID,默认false
removeCompleted:是否删除容器内已经上传完毕文件,默认true
removeTimeout:删除容器内已经上传完毕文件延迟时间,单位s,默认3
fileSizeLimit:设置允许上传文件大小,单位k,默认0不限制
multi:是否支持多文件同时上传,默认false
queueSizeLimit:限制一次上传文件个数,即容器内最多文件个数,默认999
simUploadLimit:允许同时上传文件个数,同时执行,默认1,(注:3.0.0测试版注释此参数)
调试设置
debug:是否显示调试框,默认false
checkExisting:检查待上传文件是否存在程序,默认uploadify-check-existing.php
其他设置
fileObjName:设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据,默认Filedata,(作用不明)
requeueErrors:未知,默认false
preventCaching:未知,默认true
progressData:未知,默认percentage
successTimeout:未知,默认30
transparent:未知,默认true
uploadLimit:未知,默认999
uploaderType:未知,默认html5
langFile:错误提示文件,可以忽略
id:当前操作的ID编码,默认jQuery(this).attr('id'),可以忽略。
onClearQueue: function () {}:未知
onDialogOpen: function () {}:打开选择文件窗口
onDialogClose: function () {}:关闭选择文件窗口
onInit: function () {}:初始化
onQueueComplete: function () {}:全部文件上传结束
onSelectError: function () {}:选择文件:选择错误
onSelect: function () {}:单个文件:选择文件,每选中一个文件都执行一次
onSWFReady: function () {}:未知
onUploadCancel: function () {}:未知
onUploadComplete: function () {}:单个文件上传结束,注意:最后一个文件结束在全部结束后
onUploadError: function () {}:上传文件错误/取消已选择文件
onUploadProgress: function () {}:单个文件:上传过程中
demo 下载,有问题大家可以一起讨论啊。。。。。