最近弄了一个JQuery Uploadify上传的例子,分享一下。
先看下效果:
初始页面:
上传成功:
展示页面:
看代码:
add.jsp:
<form:form method="Post" action="/uploadDemo/admin/photo/add.spring" commandName="photoBean" id="photoBean_form" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">NAME</label>
<div class="controls">
<form:input class="input-xlarge focused" id="name" path="name" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">IMAGE</label>
<div class="controls">
<form:hidden path="path"/>
<input id="fileUpload" name="fileUpload" multiple="true" /><img src="" id="imgId" style="display:none"/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</fieldset>
</form:form>
js:
<script type="text/javascript"> var imgId = Math.uuid(); $(document).ready(function() { $("#fileUpload").uploadify({ 'swf' : '../img/uploadify.swf', 'uploader' : '/uploadDemo/scripts/uploadify?name=' + imgId, height : 20, width : 120, 'queueSizeLimit' :1, 'fileTypeDesc' : 'png或者jpg', 'fileTypeExts' : '*.png;*.jpg', 'multi' : false, 'buttonText' : '上传', 'wmode' : 'transparent', onUploadSuccess:function(file,data,response){ $("#path").val('/uploads/' + imgId + file.type); showImg('/uploads/' + imgId + file.type); } }); }); function showImg(path) { $("#imgId").attr('src', '/uploadDemo/' + path); $("#imgId").show(); } </script>
上传的Servert,借鉴的是baidu出来的,具体网址忘了,作者别生气:
package com.pro.controller;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class Uploadify extends HttpServlet{
private static final long serialVersionUID = 1L;
/**
* 实现多文件的同时上传
*/
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String fileRealPath = "";
String name = request.getParameter("name");
String firstFileName="";
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" ;
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdirs();
}
try {
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
Object obit = it.next();
if(obit instanceof DiskFileItem){
DiskFileItem item = (DiskFileItem) obit;
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + name + formatName;//文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
}
}
}
} catch (org.apache.commons.fileupload.FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
return;
}
}
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}