uploadify v2.1.4使用demo

最新推荐文章于 2023-01-11 11:24:14 发布

chenshan8058

最新推荐文章于 2023-01-11 11:24:14 发布

阅读量135

点赞数

原文链接：https://my.oschina.net/u/3523500/blog/2907132

版权

前阵子用到了上传功能，现在总结一下，废话不多说，直接上代码

1.uploadify2.ftl 页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>uploadify2</title>
<link href="../js/uploadify2/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/uploadify2/swfobject.js"></script>
<script type="text/javascript" src="../js/uploadify2/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript">
var desc = '*.doc;*.docx;*.xls;*.xlsx;*.pdf';
var sizeLimit = 10;
$(function(){
	$("#uploadify").uploadify({
		'uploader': '../js/uploadify2/uploadify.swf?var='+(new Date()).getTime(),
		'cancelImg': '../js/uploadify2/cancel.png',
		'script': '../uploadify2Controller/uploadfiles.do',	
		'method': 'get',
		'sizeLimit' : sizeLimit*1024*1024,
		'fileDesc': '请选择要上传的文件',
		'fileExt': desc,
		'queueID': 'fileQueue',
		'multi': false,
		'auto':false,
		'buttonText': 'BROWSE',
		'buttonImg':'../js/uploadify2/liulan_bg.gif',
		'onError':function(event,queueID,fileObj,errorObj) {
			if(errorObj!=null && errorObj.type=="File Size"){
				alert("文件不能大于"+sizeLimit+"M");
			}else{
				alert("文件上传异常");
			}
		},
		'onSelect':function(event,queueID,fileObj) {
			var companyName = $('#companyName').val();
			if (companyName == "" || companyName == null) {
				alert("请填写单位名称!");
				return false;
			}
			var contactPhone = $('#contactPhone').val();
			if (contactPhone == "" || contactPhone == null) {
				alert("请填写联系方式!");
				return false;
			}
		},
		'onComplete':function(event,queueID,fileObj,response) { 
			alert("上传成功");
		}
	});
});

function exeUpload(){
	if(window.confirm('是否确认上传？')){
		var filePath = "upload";
		$('#uploadify').uploadifySettings('scriptData', {'proVal': filePath});
		jQuery('#uploadify').uploadifyUpload();
	}else{
		return false;
    }
}
function trim(str){
	return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
</head>
<body>
<div>
	单位名称：<input type="text" id="companyName" name="companyName" /><br />
	联系方式：<input type="text" id="contactPhone" name="contactPhone" />
	<div id="fileQueue"></div>
	<input type="file" name="uploadify" id="uploadify" />
	<input type="button" onclick="javascript:exeUpload()" value="上传" />
	<input type="button" onclick="javascript:jQuery('#uploadify').uploadifyClearQueue()" value="撤销" />
</div>
</body>
</html>

2.Uploadify2Controller.java

package com.zhouyu.uploadify2.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.zhouyu.uploadify2.service.Uploadify2Service;

@Controller
@RequestMapping("/uploadify2Controller")
public class Uploadify2Controller {
	public Uploadify2Service uploadify2Service;
	public Uploadify2Service getUploadify2Service() {
		return uploadify2Service;
	}

	@Autowired
	public void setUploadify2Service(Uploadify2Service uploadify2Service) {
		this.uploadify2Service = uploadify2Service;
	}

	@RequestMapping("/uploadify2")
	public String uploadify2(HttpServletRequest request) {
		return "uploadify2";
	}
	
	@RequestMapping(value = "/uploadfiles") 
	@ResponseBody 
	public String uploadFile(HttpServletRequest request) { 
		String filePathList = ""; 
		try { 
			filePathList = uploadify2Service.uploadFile(request); 
		} catch(Exception ex){ 
			ex.printStackTrace(); 
		} 
		return filePathList; 
	}
}

3.Uploadify2ServiceImpl.java

package com.zhouyu.uploadify2.service;

import java.io.File;
import java.util.Map;
import java.util.UUID;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Service;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Service("uploadify2Service")
public class Uploadify2ServiceImpl implements Uploadify2Service {

	public String uploadFile(HttpServletRequest request) {
		// TODO Auto-generated method stub
		String saveFilePath = request.getSession().getServletContext().getRealPath("/") + "upload/";
		// 转换request，解析出request中的文件
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
		// 获取文件map集合
		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); 
		String fileName = null; 
		// 循环遍历，取出单个文件
		for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
			// 获取单个文件
			MultipartFile mf = entity.getValue(); 
			// 获得原始文件名
			fileName = mf.getOriginalFilename(); 
			// 重命名文件
			fileName = reFileNameByUUID(saveFilePath,fileName);
			String newfilepath = saveFilePath + fileName;  
			File dest = new File(saveFilePath); 
			if (!dest.exists()) { 
				dest.mkdirs(); 
			} 
			File uploadFile = new File(newfilepath); 
			if (uploadFile.exists()) { 
				uploadFile.delete(); 
			} 
			try { 
				FileCopyUtils.copy(mf.getBytes(), uploadFile); 
			} catch (IOException e) { 
				// TODO Auto-generated catch block 
				 e.printStackTrace(); 
				return null; 
			}
		}
		
		return fileName; 
	}
	
	/**
	 * UUID命名
	 * 
	 */
	public static String reFileNameByUUID(String filePath,String fileName){
		 String uFileName = UUID.randomUUID().toString();
		 uFileName = uFileName.substring(0,8)+uFileName.substring(9,13)+uFileName.substring(14,18)+uFileName.substring(19,23)+uFileName.substring(24); 
		 int p = fileName.lastIndexOf(".");
     	 fileName = uFileName+fileName.substring(p, fileName.length()); 
     	 File file =new File(filePath+fileName);
		 if(file.exists()){      
	        	fileName = reFileNameByUUID(filePath,fileName);
	        } 
		return fileName;
	}
}

4.运行项目，访问http://127.0.0.1:8080/upload/uploadify2Controller/uploadify2.do