JQuery uploadify 例子

最近弄了一个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);    
    }  
}

 
 

评论

1 楼 ANN_MM 2014-02-13