jQuery File Upload 可运行的

jQuery File Upload 可运行的 java 后台

图例



--------------------------有啥不懂的，请留言，我帮你-----------------

代码:

java

package com.hmkcode.spring.mvc.controllers;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

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

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class Upload extends HttpServlet {

	/**
	 * 处理类别
	 */
	protected void service(HttpServletRequest request,
			HttpServletResponse response) {
		try {
			uploadify(request, response);
		} catch (Exception e) {
			e.printStackTrace();
		}

		// //1. build an iterator
		// Iterator<String> itr = request.getreq();
		// MultipartFile mpf = null;

	}

	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		super.destroy();
	}

	@SuppressWarnings( { "rawtypes", "unchecked" })
	public void uploadify(HttpServletRequest req, HttpServletResponse resp)
			throws IOException {

		req.setCharacterEncoding("UTF-8");
		resp.setCharacterEncoding("UTF-8");

		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

		String dirDate = sdf.format(new Date());
		String dir = "upload/" + dirDate;// 按日期生成存放目录
		String savePath = this.getServletConfig().getServletContext()
				.getRealPath(dir);
		File f1 = new File(savePath);
		if (!f1.exists()) {
			f1.mkdirs();
		}
		f1 = null;

		DiskFileItemFactory fac = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(fac);
		upload.setHeaderEncoding("UTF-8");
		List fileList = null;
		try {
			fileList = upload.parseRequest(req);
		} catch (FileUploadException ex) {
			ex.printStackTrace();
			return;
		}
		if (fileList == null) {
			return;
		}
		Iterator<FileItem> it = fileList.iterator();
		String name = "";
		String extName = "";
		while (it.hasNext()) {
			FileItem item = it.next();
			if (!item.isFormField()) {
				name = item.getName();
				if (name == null || name.trim().equals("")) {
					continue;
				}

				// 文件后缀名 如：.jpg
				if (name.lastIndexOf(".") >= 0) {
					extName = name.substring(name.lastIndexOf("."));
				}
				// \s去除任何空空白符如： 空格符、制表符和进纸符等
				String fileName = name.replaceAll("\\s", "");

				fileName = fileName.substring(0, fileName.lastIndexOf(".") - 1);

				// 仅仅是为了判断当前命名的文件是否已存在
				File f = new File(savePath + "/" + fileName + extName);

				while (f.exists()) {// 如果文件存在，在文件名后加上随机数做区分

					/* 日期+100以内的随机数 */
					int rand = (int) Math.round(Math.random() * 100);
					sdf = new SimpleDateFormat("HHMMss");

					fileName += "_" + sdf.format(new Date()) + rand;
					f = new File(savePath + "/" + fileName + extName);
				}
				f = null;

				File saveFile = new File(savePath + "/" + fileName + extName);
				try {
					item.write(saveFile);
				} catch (Exception e) {
					e.printStackTrace();
				}
				System.out.println(dir + "/" + fileName + extName);// 返回相对根路径：http://xx.xx.com/upload/songs/2010/06/05/ring.mp3

				/*
				 * 注：插件需要服务器端返回JSON格式的字符串，且必须以下面的格式来返回，一个字段都不能少
				 * 如果上传失败，那么则须用特定格式返回信息： "name": "picture1.jpg", "size": 902604,
				 * "error": "Filetype not allowed"
				 * 另外，files必须为一个JSON数组，哪怕上传的是一个文件
				 */
				JSONArray ja = new JSONArray();
				JSONObject json = new JSONObject();
				json.put("name", fileName);
				json.put("fileSize", 321656);
				json.put("url", "http://localhost:9096/upload/" + dirDate + "/"
						+ saveFile.getName());
				json.put("thumbnailUrl", "http://localhost:9096/upload/"
						+ dirDate + "/" + "thumbnail/" + saveFile.getName());
				json.put("deleteUrl", "http://localhost:9096/upload/" + dirDate
						+ "/" + saveFile.getName());
				json.put("deleteType", "DELETE");
				ja.add(json);
//				JSONObject js = new JSONObject();
//				js.put("files", ja);
				resp.getWriter().print(ja.toString());
			}
		}
	}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
id="WebApp_ID" version="2.5">
  <display-name>Archetype Created Web Application</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
 <servlet>
  	<servlet-name>upload</servlet-name>            
  	<servlet-class>com.hmkcode.spring.mvc.controllers.Upload</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>upload</servlet-name>
  	<url-pattern>/upload/*</url-pattern>
  </servlet-mapping>
</web-app>

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<script src="js/jquery.1.9.1.min.js"></script>

<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

<!-- bootstrap just to have good looking page -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />

<!-- we code these -->
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="js/myuploadfunction.js"></script>
</head>

<body>
<h1>Spring MVC - jQuery File Upload</h1>
<div style="width:500px;padding:20px">
	<!-- 单个上传multiple  改请用  -->
	<input id="fileupload" type="file" name="files[]" data-url="uploadfile/<span style="font-family: Arial, Helvetica, sans-serif;">uploadfile</span>" single>
	
	<div id="dropzone" class="fade well">Drop files here</div>
	
	<div id="progress" class="progress">
    	<div class="bar" style="width: 0%;"></div>
	</div>

	<table id="uploaded-files" class="table">
		<tr>
			<th>File Name</th>
			<th>File Size</th>
			<th>File Type</th>
			<th>Download</th>
		</tr>
	</table>
	
</div>
</body> 
</html>