你的位置:首页 > Java教程

[Java教程]Uploadify文件上传

一、简介

   Uploadify 是一种基于html5 或 flash的多文件上传的jQuery插件。Uploadify可以支持多种定制。它是一种异步的文件上传插件。下载网站为http://www.uploadify.com/。这里使用的是Uploadify Version 3.2.1版本。下载解压后,目录如下所示:

  使用Uploadify需要加入如下js

<script src="jquery1.10.2 .min.js" type="text/javascript"></script> <!-- 这里jquery 版本问1.10.2 --><script src="jquery.uploadify.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="uploadify.css"> <!-- 样式文件 -->

二、示例

   网页示例如下:

 1 <%@ page contentType="text/html; charset=UTF-8"%> 2 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  3 <c:set var="ctx" value="${pageContext.request.contextPath}" /> 4 <!DOCTYPE HTML> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <title>UploadiFive Test</title> 9 <script src="${ctx}/index/uploadify/jquery1.10.2 .min.js" type="text/javascript"></script> 10 <script src="${ctx}/index/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> 11 <style type="text/css"> 12 body { 13   font: 13px Arial, Helvetica, Sans-serif; 14 } 15 .uploadify { 16   position: relative; 17   margin-bottom: 1em; 18 } 19 .uploadify-button { 20   background-color: #505050; 21   background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 22   background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%); 23   background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%); 24   background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%); 25   background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%); 26   background-image: -webkit-gradient( 27     linear, 28     left bottom, 29     left top, 30     color-stop(0, #505050), 31     color-stop(1, #707070) 32   ); 33   background-position: center top; 34   background-repeat: no-repeat; 35   -webkit-border-radius: 30px; 36   -moz-border-radius: 30px; 37   border-radius: 30px; 38   border: 2px solid #808080; 39   color: #FFF; 40   font: bold 12px Arial, Helvetica, sans-serif; 41   text-align: center; 42   text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 43   width: 100%; 44 } 45 .uploadify:hover .uploadify-button { 46   background-color: #606060; 47   background-image: linear-gradient(top, #606060 0%, #808080 100%); 48   background-image: -o-linear-gradient(top, #606060 0%, #808080 100%); 49   background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%); 50   background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%); 51   background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%); 52   background-image: -webkit-gradient( 53     linear, 54     left bottom, 55     left top, 56     color-stop(0, #606060), 57     color-stop(1, #808080) 58   ); 59   background-position: center bottom; 60 } 61 .uploadify-button.disabled { 62   background-color: #D0D0D0; 63   color: #808080; 64 } 65 .uploadify-queue { 66   margin-bottom: 1em; 67 } 68 .uploadify-queue-item { 69   background-color: #F5F5F5; 70   -webkit-border-radius: 3px; 71   -moz-border-radius: 3px; 72   border-radius: 3px; 73   font: 11px Verdana, Geneva, sans-serif; 74   margin-top: 5px; 75   max-width: 350px; 76   padding: 10px; 77 } 78 .uploadify-error { 79   background-color: #FDE5DD !important; 80 } 81 .uploadify-queue-item .cancel a { 82   background: url('../uploadify/uploadify-cancel.png') 0 0 no-repeat; 83   float: right; 84   height:  16px; 85   text-indent: -9999px; 86   width: 16px; 87 } 88 .uploadify-queue-item.completed { 89   background-color: #E5E5E5; 90 } 91 .uploadify-progress { 92   background-color: #E5E5E5; 93   margin-top: 10px; 94   width: 100%; 95 } 96 .uploadify-progress-bar { 97   background-color: #0099FF; 98   height: 3px; 99   width: 1px;100 }101 </style>102 </head>103 104 <body>105   <h1>Uploadify Demo</h1>106   <form>107     <div id="queue"></div>108     <input id="file_upload" name="file_upload" type="file" multiple="true">109     <input type="button" value="开始上传" onclick="startupload();" />110   </form>111 112 <script type="text/javascript">113 var upload;114 $(function() {115   upload = $('#file_upload').uploadify({116     'auto'   : false,117     'fileTypeDesc' : '图片文件',118     'fileTypeExts' : '*.gif; *.jpg; *.png',119     'buttonText' : '选择文件...',120     'width'  : 300,121     'multi': true,122     'formData'   : {123       'timestamp' : 'ddd',124       'token'   : '/sdf/fdsfs'125     },126     'fileDataName' : 'Filename',//与后端获取文件的名称一致127     'cancelImg'   : 'images/cancel.png', 128     'method'  : 'post',129     'swf'   : '${ctx}/index/uploadify/uploadify.swf',130     'uploader' : '${ctx}/control/file/upload.action',131     'button_image_url':'${ctx}/index/uploadify/',132     'requeueErrors' : true,133     'onSelectError' : function() {134       alert('请选择图片文件');135       return false;136     },137     'onSelect' : function(file) {138       console.log('The file ' + file.name + ' was added to the queue.');139     },140     'onUploadStart' : function(file) {141       console.log('开始上传: ' + file.name);142     },143     'onUploadComplete' : function(file) {144       console.log('文件 ' + file.name + ' 上传成功');145     },146     'onUploadSuccess' : function(file, data, response) {147       console.log('文件 ' + file.name + ' 上传成功 相应数据为: ' + response + ':' + data);148       if(data){149         alert("上传成功!");150       }else{151         alert("上传失败,请重新上传!");152       }153     }154   });155 });156 157 function startupload(){158   upload.uploadify('upload','*');159 }160 </script>161 </body>162 </html>

  下载地址:点击下载 。

  后端处理代码如下:

package com.test.web.test;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.io.UnsupportedEncodingException;import java.util.Calendar;import java.util.Date;import javax.servlet.http.HttpServletRequest;import org.apache.commons.io.IOUtils;import org.springframework.context.annotation.Scope;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;@Controller@Scope("prototype")@RequestMapping("/control/file")public class FileUpload {  @RequestMapping(value = "upload", method = RequestMethod.POST)  @ResponseBody  public boolean test(HttpServletRequest request) throws UnsupportedEncodingException {    String path = request.getSession().getServletContext().getRealPath("");    Calendar calendar = Calendar.getInstance();    calendar.setTime(new Date());    request.setCharacterEncoding("UTF-8");    path = String.format("%s\\%s\\%s\\%s\\%s\\%s", path, "file", "upload", calendar.get(calendar.YEAR),        calendar.get(calendar.MONTH), calendar.get(calendar.DAY_OF_MONTH));    File filepath = new File(path);    if (!filepath.exists()) {      filepath.mkdirs();    }    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;    // 获得文件    MultipartFile multipartFile = multipartRequest.getFile("Filedata");//与前端设置的fileDataName属性值一致    String filename = multipartFile.getOriginalFilename();// 文件名称    OutputStream os = null;    InputStream is = null;    File uploadFile = null;    try {      is = multipartFile.getInputStream();      if (is != null) {        uploadFile = new File(filepath, System.currentTimeMillis() + filename.substring(filename.lastIndexOf(".") - 1));        os = new FileOutputStream(uploadFile);        IOUtils.copy(is, os);        os.flush();      }    } catch (IOException e) {      e.printStackTrace();      return false;    } finally {      IOUtils.closeQuietly(os);      IOUtils.closeQuietly(is);    }    return true;  }}