使用uploaddify(swf版本)上传多个文件|智慧点点-计算机软件毕业设计，包括源码，论文，IT项目源码教程分享网站

使用uploaddify(swf版本)上传多个文件

包含内容: 源码,全套工具

作者QQ549710689

详情描述

Custom Tab

项目环境概述

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工程】,看完之后，你就可以将项目跑起来了

请使用装有flash的浏览器测试此工程(像谷歌浏览器可能无法使用)

2. 项目介绍

本文为Web项目，代码管理使用maven, 后台使用spring,springmvc框架, 前台使用jQuery uploaddify框架，下面直接介绍如何使用uploaddify上传一个或者多个文件

2.1 首先需要下载uploaddify, 它的文件框架如下图所示

2.2 新建一个upload.jsp文件

2.2.1 文件中需要引入 jquery.min.js, uploadify.css, jquery.uploadify.min.js

<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/jsLib/uploaddify/uploadify.css">
<!--引入Jquery-->
<script type="text/javascript" src="<%=contextPath%>/jsLib/jquery/jquery.min.js"></script>
<!--引入uploadify-->
<script type="text/javascript" src="<%=contextPath%>/jsLib/uploaddify/jquery.uploadify.min.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>
			<input type="file" name="file_upload" id="file_upload" />
			<p>
				<input type="button" class="shortbutton" id="btnUpload" 
				          onclick="doUpload()" value="上传" /> 
				<input type="button" class="shortbutton" id="btnCancelUpload" 
				          onclick="$('#file_upload').uploadify('cancel')" value="取消" />
			</p>
			<div id="div_show_files"></div>
		</div>
		<div id="fileQueue" class="fileQueue"></div>
	</form>
</body>

2.2.3 下面是使用uploaddify处理上传文件的核心

这个控件有很多参数控制，以及事件的处理响应，相对来说比较好用。参数控制可以控制上传文件多选、文件类型、文件大小、文件数量、检查文件是否存在，以及一些按钮参数的控制，如文字、高度、宽度等，对提交文件成功与否、完成操作、取消、停止上传等等都有控制。

onUploadSuccess: uploaddify在处理多文件上传时，是一个一个处理的,

每个文件上传成功或者失败后都会执行此函数

uploader : <%=contextPath%>/upload/uploadFile.htm 后台上传文件接口

fileSizeLimit: 30MB 上传文件大小控制

fileTypeExts: 上传文件类型, *.*(任何类型) *.zip;*.rar;*.7z

multi: 是否支持多文件上传

removeCompleted: 上传成功之后是否移除上传文件列表

<script type="text/javascript">  
	$(function () {
		$('#file_upload').uploadify({    
			'swf': '<%=contextPath%>/jsLib/uploaddify/uploadify.swf', //FLash文件路径   
			'buttonText': '浏 览', //按钮文本   
			'uploader': '<%=contextPath%>/upload/uploadFile.htm',    //后台对应的上传功能
			buttonClass: "some-class",  //设置上传按钮的class 
			buttonCursor: 'hand', //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头) 
			buttonImage: '<%=contextPath%>/jsLib/uploaddify/img/browse-btn.png',  //设置图片按钮的路径（                                    当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，
			'formData': {
				'folder': 'picture', 
				'isCover': 1 
			},   
			//传参数    
			'queueID': 'fileQueue',     //队列的ID
			'queueSizeLimit': 10,       //队列最多可上传文件数量，默认为999
			'auto': false,              //选择文件后是否自动上传，默认为true
			'multi': true,              //是否为多选，默认为true
			'removeCompleted': false,   //是否完成后移除序列，默认为true
			'fileSizeLimit': '30MB',    //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
			'fileTypeDesc': 'All Files', //文件描述    
			'fileTypeExts': '*.*',        //上传的文件后缀过滤器          *.zip; *.rar; *.7z
			'onQueueComplete': function (queueData) {//所有队列完成后事件    
				//alert("上传完毕！");    
			},
			'onError': function (event, queueId, fileObj, errorObj) {
				alert(errorObj.type + "：" + errorObj.info);   
			},
			'onUploadStart': function (file) {
				
			},  
			//一个文件上传成功后的响应事件处理 
			'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('上传失败');
				}
			}    
		});  
	});   
	
	//执行上传  
	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 上传成功后，将上传成功的文件显示在列表中, 点击列表中的【下载】，可以下载上传成功的文件

注意: 如果浏览器无法显示待上传文件列表, 需要安装flash插件,建议使用360浏览器尝试

如下图(谷歌浏览器): 无法正常上传文件

作者微信 bishe2022

Custom Tab

UploadFile.zip

智慧币/个