使用uploaddify(h5版本)上传多个文件
包含内容: 源码,全套工具
作者QQ549710689
下载Demo
项目环境概述
Eclipse:
版本: eclipse-mars
下载地址: https://pan.baidu.com/s/1ci4Nim
Tomcat:
版本: apache-tomcat-7.0.59
下载地址: https://pan.baidu.com/s/1eS6JlrO
Maven:
版本: apache-maven-3.0.2
下载地址: https://pan.baidu.com/s/1i4Ud35F
JDK:
版本: JDK1.7
下载地址: https://pan.baidu.com/s/1jHWJSdK
1. 项目准备
项目运行前准备: 本项目为maven工程, 工程所有依赖的jar包需要根据pom.xml进行下载
没有使用过maven工程的小伙伴请阅读下 【eclipse如何导入和配置maven工程】,看完之后，你就可以将项目跑起来了
huploadify插件版本为h5版本，可通用所有浏览器
2. 项目介绍
本文为Web项目，代码管理使用maven, 后台使用spring,springmvc框架, 前台使用jQuery uploaddify框架，下面直接介绍如何 使用huploadify上传一个或者多个文件
2.1 首先需要下载huploadify, 它的文件框架如下图所示
2.2 新建一个upload.jsp文件
2.2.1 文件中需要引入 jquery.min.js, Huploadify.css, jquery.Huploadify.js
<!-- 引入css --> <link rel="stylesheet" type="text/css" href="<%=contextPath%>/jsLib/huploadify/Huploadify.css"> <!--引入Jquery--> <script type="text/javascript" src="<%=contextPath%>/jsLib/jquery/jquery.min.js"></script> <!--引入uploadify--> <script type="text/javascript" src="<%=contextPath%>/jsLib/huploadify/jquery.Huploadify.js"></script>
2.2.2 给upload.jsp添加页面元素
<body> <table id="uploadTable" border="1px" bordercolor="blue" > <tr><td>上传文件名称</td><td>后台存储文件路径</td><td>文件下载链接</td></tr> </table> <br> <form id="formUpFile" runat="server" enctype="multipart/form-data"> <div> <!-- <div id="upload_file"></div> --> <div id="upload" /> </div> </form> </body>
2.2.3 下面是使用huploadify处理上传文件的核心
这个控件有很多参数控制，以及事件的处理响应，相对来说比较好用。参数控制可以控制上传文件多选、文件类 型、文件大小、文件数量、检查文件是否存在，以及一些按钮参数的控制，如文字、高度、宽度等，对提交文件成功与 否、完成操作、取消、停止上传等等都有控制。
onUploadSuccess: huploadify在处理多文件上传时，是一个一个处理的,
每个文件上传成功或者失败后都会执行此函数
uploader : <%=contextPath%>/upload/uploadFile.htm 后台上传文件接口
fileSizeLimit: 30MB 上传文件大小控制
fileTypeExts: 上传文件类型, *.*(任何类型) *.zip;*.rar;*.7z
multi: 是否支持多文件上传
removeCompleted: 上传成功之后是否移除上传文件列表
<script type="text/javascript">
$(function () {
var up = $('#upload').Huploadify({
'queueID': 'fileQueue', //队列的ID
'queueSizeLimit': 1, //队列最多可上传文件数量，默认为999
'auto': false, //选择文件后是否自动上传，默认为true
'multi': true, //是否为多选，默认为true
'removeCompleted': false, //是否完成后移除序列，默认为true
'fileSizeLimit': 30720, //单个文件大小，0为无限制，
//可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': 'All Files', //文件描述
'fileTypeExts': '*.*', //上传的文件后缀过滤器
'uploader': '<%=contextPath%>/upload/uploadFile.htm', //后台对应的上传功能
buttonClass: "some-class", //设置上传按钮的class
buttonCursor: 'hand', //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
onUploadStart:function(file){
console.log(file.name+'开始上传');
},
onInit:function(obj){
console.log('初始化');
console.log(obj);
},
onUploadComplete:function(file){
console.log(file.name+'上传完成');
},
onCancel:function(file){
console.log(file.name+'删除成功');
},
onClearQueue:function(queueItemCount){
console.log('有'+queueItemCount+'个文件被删除了');
},
onDestroy:function(){
console.log('destroyed!');
},
onSelect:function(file){
console.log(file.name+'加入上传队列');
},
onQueueComplete:function(queueData){
console.log('队列中的文件全部上传完成',queueData);
},
onUploadSuccess: function (file, data, response) {
var data = $.parseJSON(data);//如果data是json格式
if(data.stateCode == '0'){
var fileName = data.data.fileName;
var filePath = data.data.filePath;
var fileLink = data.data.fileLink;
var fileInfo = "<tr>" +
"<td>" + fileName + "</td>" +
"<td>" + filePath + "</td>" +
"<td><a href='" + fileLink + "' target='_blank'>下载</ a>" + "</td>" +
"<tr>";
$('#uploadTable').append(fileInfo);
}else{
alert('上传失败');
}
}
});
/* $('#btnUpload').click(function(){
up.upload('*');
});
$('#btnCancelUpload').click(function(){
up.cancel('*');
}); */
});
//执行上传
function doUpload() {
$('#file_upload').uploadify('upload', '*');
}
</script>2.3 后台上传文件代码
后台使用MultipartFile来对文件进行处理, 其对应函数 getOriginalFilename 获得上传文件名称
getSize 获得上传文件大小;
代码在项目根路径下面新建了文件夹 tmp, 上传的文件全部放在tmp目录下，代码对上传文件名称进行名称替换，
使用FolderUtil.getUUID() 生成相应的名称
package com.main.controller;
import java.io.File;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import com.alibaba.fastjson.JSONObject;
import com.main.model.FileInfo;
import com.main.util.Constant;
import com.main.util.FolderUtil;
import com.main.util.Result;
@Controller
@RequestMapping("/upload")
public class UploadController {
public UploadController() {
System.out.println("MainController构造函数");
}
@RequestMapping("/getUploadPage.htm")
public String getUploadPage(HttpServletRequest request){
return "upload";
}
//访问此资源的url: http://localhost:8080/UploadFile/upload/uploadFile.htm
@RequestMapping("/uploadFile.htm")
@ResponseBody
public Result uploadFile(HttpServletRequest request)
{
Result result = new Result();
JSONObject json_out = new JSONObject();
result.setStateCode(Constant.RESULT_FAILURE);
String strMsg = "";
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
if(multipartResolver.isMultipart(request)){
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
Iterator<String> iter = multiRequest.getFileNames();
try{
MultipartFile file = multiRequest.getFile((String)iter.next());
//文件不能超过30M
if(file.getSize() <= 31457280){
System.out.println(file.getSize());
//这里面名字是这个标签中的名字 <input type="file" name="orgcodeImg"
//onchange="return chageOrgImg();"></input>
String fileFlag = file.getName();
// 获得文件类型（可以判断如果不是指定类型，禁止上传） image/jpeg
// && contentType.contains("image")
String contentType = file.getContentType();
if(file != null){
FileInfo fileInfo = new FileInfo();
String fileName = file.getOriginalFilename();
fileInfo.setFileName(fileName);
String suffix = fileName.substring(fileName.lastIndexOf("."));
String ext = fileName.substring(fileName.lastIndexOf(".") + 1);
String path = request.getSession().getServletContext()
.getRealPath("") + File.separator + "tmp";
File fileHeadImg = new File(path);
FolderUtil.mkDir(fileHeadImg);
//将上传文件保存到本地
String picNewName = FolderUtil.getUUID()
+ fileName.substring(fileName.lastIndexOf("."), fileName.length());;
String outputpath = path + File.separator + picNewName;
fileInfo.setFilePath(outputpath);
fileInfo.setFileLink(request.getContextPath() + File.separator
+ "tmp" + File.separator + picNewName);
File localFile = new File(outputpath);
file.transferTo(localFile);
result.setStateCode(Constant.RESULT_SUCCESS);
result.setDesc("上传文件成功");
result.setData(fileInfo);
}else{
result.setStateCode(Constant.RESULT_FAILURE);
result.setDesc("不是文件");
}
}
}catch(Exception e){
result.setStateCode(Constant.RESULT_FAILURE);
result.setDesc("上传文件异常");
e.printStackTrace();
}
}
return result;
}
//测试函数
public static void main(String[] args)
{
// TODO Auto-generated method stub
}
}3 项目运行
3.1 启动项目，在地址栏中输入: http://localhost:8080/UploadFile/upload/getUploadPage.htm
3.2 点击【Browse】，选择需要上传的文件, 如下图，选择相应的三个文件, 点击【上传】按钮
3.3 上传成功后，将上传成功的文件显示在列表中, 点击列表中的【下载】，可以下载上传成功的文件
