`
chuan9966
  • 浏览: 46166 次
文章分类
社区版块
存档分类
最新评论

JQuery Uploadify v3.2.1 上传图片并预览(基于spring mvc框架开发)

 
阅读更多

Controller后台处理:

package com.news.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller
@RequestMapping("/upload")
public class UpLoadIMGController {
	
	@RequestMapping("/uploadIMG")
	public void uploadIMG(HttpServletRequest request, HttpServletResponse response) throws Exception{
		MultipartHttpServletRequest multipartRequest =  (MultipartHttpServletRequest) request;
		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();    
		String ctxPath=request.getSession().getServletContext().getRealPath("/")+"uploadFiles";
		ctxPath +=  File.separator;  
		// 创建文件夹  
		File file = new File(ctxPath);    
		if (!file.exists()) {    
		file.mkdirs();    
		}
		String fileName = null; 
		String newName = null;
		for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {    
		// 上传文件   
		MultipartFile mf = entity.getValue();  
		fileName = mf.getOriginalFilename();//获取原文件名
		//获得当前时间的最小精度
		SimpleDateFormat format =  new SimpleDateFormat("yyyyMMddHHmmssSSS");
		newName = format.format(new Date());
		//获得三位随机数
		Random random = new Random();
		for(int i = 0; i < 3; i++){
			newName = newName + random.nextInt(9);
		}
		File uploadFile = new File(ctxPath + newName+fileName.substring(fileName.lastIndexOf(".")));
		try {  
		FileCopyUtils.copy(mf.getBytes(), uploadFile); 
	   } catch (IOException e){
			 e.printStackTrace();  
	   }
	}
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(newName+fileName.substring(fileName.lastIndexOf(".")));
	}
	
	@RequestMapping("/getImg")
	public void getImg(HttpServletRequest request, HttpServletResponse response) throws Exception{
		String file = request.getParameter("file");
		String path = request.getSession().getServletContext().getRealPath("/")+"uploadFiles"+File.separator+file;
		File pic = new File(path);
        FileInputStream fis = new FileInputStream(pic);
        OutputStream os = response.getOutputStream();
        try {
            int count = 0;
            byte[] buffer = new byte[1024 * 1024];
            while ((count = fis.read(buffer)) != -1)
                os.write(buffer, 0, count);
            os.flush();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (os != null)
                os.close();
            if (fis != null)
                fis.close();
        }
		
	}
}

jsp前台:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.uploadify.min.js"></script>
<link href="${pageContext.request.contextPath}/css/uploadify.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
            $(function() {
                $("#upload_org_code").uploadify({
                    'height'        : 27,
                    'width'         : 80, 
                    'buttonText'    : '选择图片',
                    'swf'           : '${pageContext.request.contextPath}/css/uploadify.swf',
                    'uploader'      : '${pageContext.request.contextPath}/upload/uploadIMG',
                    'auto'          : true,
                    'multi'         : false,
                    'removeCompleted':false,
                    'cancelImg'     : '${pageContext.request.contextPath}/js/uploadify-cancel.png',
                    'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.png',
                    'fileSizeLimit' : '1MB',
                    'fileObjName'   : 'file', 
                    'onUploadSuccess':function(file,data,response){
                        $('#' + file.id).find('.data').html('');
                        $("#upload_org_code_name").val(encodeURI(data));
                        $("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg?file="+encodeURI(data));  
                        $("#upload_org_code_img").show();
                    },
                    //加上此句会重写onSelectError方法【需要重写的事件】
                    'overrideEvents': ['onSelectError', 'onDialogClose'],
                    //返回一个错误,选择文件的时候触发
                    'onSelectError':function(file, errorCode, errorMsg){
                        switch(errorCode) {
                            case -110:
                                alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小!");
                                break;
                            case -120:
                                alert("文件 ["+file.name+"] 大小异常!");
                                break;
                            case -130:
                                alert("文件 ["+file.name+"] 类型不正确!");
                                break;
                        }
                    },
                });
            })
</script>
</head>
<body>
<table>
	<tr>
         <td align="right"><font style="color: red;">*</font>组织代码机构:</td>
         <td>
             <table>
                 <tr>
                     <td width="45%"><input type="file" name="upload_org_code" id="upload_org_code"/></td>
                     <td><img style="display: none" id="upload_org_code_img" src="" width="150" height="150"></td>
                  </tr>
              </table>
              <input type="hidden" name="upload_org_code_name" id="upload_org_code_name" />
              <hr>
          </td>
      </tr>
</table>
</body>
</html>



特别注意:

 $("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg?file="+encodeURI(data)); 
如果报未找到文件,不进请求方法的。请在方法处加上<span style="font-size:24px;color:#ff0000;"><strong>.do</strong></span>
<pre code_snippet_id="636289" snippet_file_name="blog_20150405_2_30604" name="code" class="html"> $("#upload_org_code_img").attr("src","${pageContext.request.contextPath}/upload/getImg<span style="color:#ff0000;"><strong>.do</strong></span>?file="+encodeURI(data)); 


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics