uploadify上传插件完整Demo(包括后台)

uploadify上传插件完整Demo,项目开发中被uploadify坑了一把,一怒之下写了前后台完整的示例,旨在彻底解决uploadify的问题!

示例文件Demo下载路径:http://download.csdn.net/download/ljj2312/10134797   

index.html

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
	font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
	<h1>Uploadify Demo</h1>
		<form>
		<div id="queue"></div>
		<input id="file_upload" name="file_upload" type="file" multiple="true">
		</form>
		 <p>
       <p>
      <a href="javascript:$('file_upload').uploadifyUpload()">upload</a>|
      <a href="javascript:$('file_upload').uploadifyClearQueue()">cacle</a>
    </p>
    </p>

	<script type="text/javascript">
		$(function() {
			
			$('#file_upload').uploadify({
				'queueID'  : 'queue',//上传进度展示
				'buttonText': 'selectFile..',
				'langFile':'uploadifyLang_zh.js',
				'swf': 'uploadify.swf',
				'formData': {
					'pid' : 'portal',
					'token': 'portal',
					'filedesc':''
				},
				'method':'Post',
				'scriptAccess' : 'always' ,
				'uploader' : 'http://10.**.23.***:8821/mgr/voice/file/v1/upload',
				 'auto': true,
				 'onUploadStart' : function(file) {
					alert('Starting to upload ' + file.name);
				},
				'onUploadSuccess' : function(file, data, response) {
					alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
				},
				'onUploadError' : function(file, errorCode, errorMsg, errorString) {
					alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
				},
				onComplete: function (evt, queueID, fileObj, response, data) {
						alert(response);
			//	$('<li></li>').appendTo('#fileContent'+id).html(response);
			}

			});
		});
	</script>
</body>
</html>

后台上传方法:

 

FileUploadServlet.java

 

package com.gsww.open.controller;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.DecimalFormat;
import java.util.List;
import java.util.UUID;

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.FileUploadBase;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.gsww.open.common.SpringContextHolder;
import com.gsww.open.entity.sys.SysUserSession;
import com.gsww.open.entity.upload.ShFileData;
import com.gsww.open.service.upload.ShFileDataService;
import com.gsww.open.util.StringHelper;
import com.gsww.open.util.TimeHelper;

public class FileUploadServlet extends HttpServlet {
	/**
	 * 
	 */
	
	private static final long serialVersionUID = 8382832509729035231L;
	

	private ShFileDataService shFileDataService = SpringContextHolder.getBean("shFileDataService");
	/**
	 * Constructor of the object.
	 */
	public FileUploadServlet() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request,response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	@Override
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		
			String fileSize = "";
			// 得到上传文件的保存目录,将上传的文件存放于WEB-INF目录下,不允许外界直接访问,保证上传文件的安全
			// E:/upload/data
			 String savePath =
			 this.getServletContext().getRealPath("/WEB-INF/upload");
			// 上传时生成的临时文件保存目录
			 String tempPath =
			 this.getServletContext().getRealPath("/WEB-INF/temp");

			File tmpFile = new File(tempPath);
			if (!tmpFile.exists()) {
				// 创建临时目录
				tmpFile.mkdir();
			}
			// 消息提示
			String message = "";
			try {
				// 使用Apache文件上传组件处理文件上传步骤:
				// 1、创建一个DiskFileItemFactory工厂
				DiskFileItemFactory factory = new DiskFileItemFactory();
				// 设置工厂的缓冲区的大小,当上传的文件大小超过缓冲区的大小时,就会生成一个临时文件存放到指定的临时目录当中。
				factory.setSizeThreshold(1024 * 100);// 设置缓冲区的大小为100KB,如果不指定,那么缓冲区的大小默认是10KB
				// 设置上传时生成的临时文件的保存目录
				factory.setRepository(tmpFile);
				// 2、创建一个文件上传解析器
				ServletFileUpload upload = new ServletFileUpload(factory);
				// 监听文件上传进度
				upload.setProgressListener(new ProgressListener() {
					public void update(long pBytesRead, long pContentLength,
							int arg2) {
					}
				});
				// 解决上传文件名的中文乱码
				upload.setHeaderEncoding("UTF-8");
				// 3、判断提交上来的数据是否是上传表单的数据
				if (!ServletFileUpload.isMultipartContent(request)) {
					// 按照传统方式获取数据
					return;
				}
				// 设置上传单个文件的大小的最大值,目前是设置为1024*1024字节,也就是1MB
				upload.setFileSizeMax(1024 * 1024 * 5);
				// 设置上传文件总量的最大值,最大值=同时上传的多个文件的大小的最大值的和,目前设置为10MB
				upload.setSizeMax(1024 * 1024 * 10);
				// 4、使用ServletFileUpload解析器解析上传数据,解析结果返回的是一个List<FileItem>集合,每一个FileItem对应一个Form表单的输入项
				List<FileItem> list = upload.parseRequest(request);
				for (FileItem item : list) {
					// 如果fileitem中封装的是普通输入项的数据
					//if (item.isFormField()) {
						//String name = item.getFieldName();
						// 解决普通输入项的数据的中文乱码问题
						//String value = item.getString("UTF-8");
						// value = new
				//	} else {// 如果fileitem中封装的是上传文件
						// 得到上传的文件名称,
						String filename = item.getName();
						Long filesizeNum = (Long) item.getSize();

						if (filesizeNum > 0) {
							DecimalFormat df = new DecimalFormat("####.00");
							float size = (float) filesizeNum / 1024;
							fileSize = df.format(size);
						}

						if (filename == null || filename.trim().equals("")) {
							continue;
						}
						// 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如:
						// c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt
						// 处理获取到的上传文件的文件名的路径部分,只保留文件名部分
						filename = filename.substring(filename
								.lastIndexOf("\\") + 1);
						// 得到上传文件的扩展名
						String fileExtName = filename.substring(filename
								.lastIndexOf(".") + 1);

						if (!StringHelper.isEmptyString(fileExtName)) {
							fileExtName = fileExtName.toLowerCase();

						}
						// 如果需要限制上传的文件类型,那么可以通过文件的扩展名来判断上传的文件类型是否合法
						// 获取item中的上传文件的输入流
						InputStream in = item.getInputStream();
						// 得到文件保存的名称
						String saveFilename = makeFileName(filename);
						// 得到文件的保存目录
						String realSavePath = makePath(saveFilename, savePath);
						// 创建一个文件输出流
						FileOutputStream out = new FileOutputStream(
								realSavePath + "\\" + saveFilename);
						// 创建一个缓冲区
						byte buffer[] = new byte[1024];
						// 判断输入流中的数据是否已经读完的标识
						int len = 0;
						// 循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据
						while ((len = in.read(buffer)) > 0) {
							// 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath +
							// "\\" + filename)当中
							out.write(buffer, 0, len);
						}
						// 关闭输出流
						out.close(); // 删除处理文件上传时生成的临时文件 //item.delete();
										// message = "文件上传成功!";
						// 关闭输入流
						in.close();

						/* 保存文件关系 */
						SysUserSession sysUserSession =(SysUserSession) request.getSession().getAttribute("sysUserSession");
						ShFileData shFileData = new ShFileData();
						shFileData.setFileSaveName(saveFilename);
						shFileData.setFileName(filename);
						shFileData.setFileSize(fileSize);
						shFileData.setFilePath(realSavePath);
						shFileData.setFileType(fileExtName);
						shFileData.setFileCreatId(sysUserSession.getAccountId());
						shFileData.setFileCreatName(sysUserSession.getUserName());
						shFileData.setFileCreatDate(TimeHelper.getCurrentTime());
						shFileData.setFileCreatState("00A");
						shFileDataService.save(shFileData);
						
						String  href = realSavePath+"\\"+saveFilename;
						StringBuilder resultHtml = new StringBuilder();
						resultHtml.append(" <li id='file_SWFUpload_5_0' style='font-size: 16px;margin-left: 25px;padding: 5px;'> ");
						resultHtml.append(" <span class='attch-name'>"+ filename);
						resultHtml.append(" <span class='attch-size'>"
										+ fileSize
										+ "KB</span><span class='attch-state' style='color:#c1c1c1'>(完成)</span>");
						resultHtml.append(" <a style='color: #178be2' target='_blank' href='"+href+"' class='attch-dload'>下载</a>");
						resultHtml.append(" <a style='color: #178be2' id='"+shFileData.getFileId()+"' class='attch-delete'>删除</a>");
						resultHtml.append(" </li>");
						response.getWriter().write(resultHtml.toString());

					//}
				}
			} catch (FileUploadBase.FileSizeLimitExceededException e) {
				request.setAttribute("message", "单个文件超出最大值!!!");
				return;
			} catch (FileUploadBase.SizeLimitExceededException e) {
				request.setAttribute("message", "上传文件的总的大小超出限制的最大值!!!");
				return;
			} catch (Exception e) {
				message = "文件上传失败!";
				request.setAttribute("message", "文件上传失败!");
			}
			request.setAttribute("message", message);
	}


	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException {
	}
	
	private String makeFileName(String filename) { // 2.jpg
		// 为防止文件覆盖的现象发生,要为上传文件产生一个唯一的文件名
		return UUID.randomUUID().toString() + "_" + filename;
	}
	private String makePath(String filename, String savePath) {
		//int dir1 = hashcode & 0xf; // 0--15
		//int dir2 = (hashcode & 0xf0) >> 4; // 0-15
		// 构造新的保存目录
		// String dir = savePath + "\\" + dir1 + "\\" + dir2; //upload\2\3
		// upload\3\5
		String dir = savePath;
		// File既可以代表文件也可以代表目录
		File file = new File(dir);
		// 如果目录不存在
		if (!file.exists()) {
			// 创建目录
			file.mkdirs();
		}
		return dir;
	}
}


注意:可能存在tomcat跨域问题,需要在Tomcat 7.0\webapps\ROOT路径下放置crossdomain.xml即可。

 

 

 

示例文件Demo下载路径:http://download.csdn.net/download/ljj2312/10134797

请关注我微信公众号:

展开阅读全文

没有更多推荐了,返回首页