spring mvc 图片异步上传

  1. 配置springmvc-config.xml文件

    <!-- 文件上传控制 -->
    <bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
    p:defaultEncoding="UTF-8">
    <property name="maxUploadSize">
    <value>104857600</value>
    </property>
    <property name="maxInMemorySize">
    <value>4096</value>
    </property>
    </bean>

    2.前端部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@include file="../common/common.jsp"%>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传</title>
</head>
<body>
<div>
    <input type="hidden" id="imgUrl" >
    <input type="file" name="file" id="myImg"/>
    <input type="button" value="提交" id="upBt">
</div>
<div id="showImg">
</div>
</body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ajaxfileupload.js"></script>
<script src="js/public/fileUtils.js"></script>
<script type="text/javascript">
    var imgPath = 'http://www.redwheelcc.com/upload/';
    $(function(){
        showImg();
    });
    //选中图片时,展示图片
    function showImg(){
        $("#myImg").on("change",function(){
            // 调用文件上传方法 文件标签id,上传路径,上传文件夹,展示位置,记录url位置
            fileHandle.uploadHead("myImg", "fileUpload/imgUpload", "img/test", "showImg",
                    "imgUrl");
        });
    }
</script>
</html>

3.Controller层


import java.io.File;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

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

import org.apache.commons.lang.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.appear.rwForklift.common.constant.Constant;
import com.appear.rwForklift.common.utils.HtmlUtils;
import com.appear.rwForklift.common.utils.Md5;




/**
 * 文件上传
 * @author APPEAR
 *
 */
@Controller
@RequestMapping("fileUpload")
public class FileUploadController {

    private final static Logger log = Logger.getLogger(FileUploadController.class);
    private final static String SUCCESS = "success";

    /**
     * 图片上传服务器 并返回图片路径
     */
    @RequestMapping("imgUpload")
    @ResponseBody
    public void imgUpload(@RequestParam(value = "file", required = true) MultipartFile file,
            @RequestParam(value = "folderName", required = true) String folderName, HttpServletRequest request,
            HttpServletResponse response) {
        try {
            // 获取文件名称
            String fileName = file.getOriginalFilename();
            // 文件名称处理
            fileName = handlerFileName(fileName);
            log.debug("图片上传fileName=" + fileName);
            File targetFile = new File(Constant.PICTURE_URL + folderName, fileName);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            // 将上传文件写到服务器上指定的文件。
            file.transferTo(targetFile);

            // 设置页面数据
            Map<String, Object> jsonMap = new HashMap<String, Object>();
            jsonMap.put(SUCCESS, true);
            jsonMap.put("imgUrl", folderName + File.separator + fileName);
            HtmlUtils.jsonToHtml(response, jsonMap);
        } catch (Exception ex) {
            ex.printStackTrace();
            //this.sendFailureMessage(response, SpringmvcExceptionHandler.getExceptionMsg(ex));
        }
    }
    /**
     * 文件名称处理
     */
    private String handlerFileName(String fileName) {
        // 处理名称start
        fileName = (new Date()).getTime() + "_" + fileName;
        // 时间戳+文件名,防止覆盖重名文件
        String pre = StringUtils.substringBeforeLast(fileName, ".");
        String end = StringUtils.substringAfterLast(fileName, ".");
        fileName = Md5.encrypt(pre) + "." + end;// 用MD5编码文件名,解析附件名称
        // 处理名称end
        return fileName;
    }
}

未完,待续…

猜你喜欢

转载自blog.csdn.net/lee_0220/article/details/72905604