SpringMVC结合ajaxfileupload.js实现异步上传文件

最新推荐文章于 2021-08-05 13:05:14 发布

原创最新推荐文章于 2021-08-05 13:05:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#异步上传 #文件 #ajaxfileupload

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用ajaxfileupload.js与SpringMVC配合，实现文件的异步上传。通过在页面引入ajaxfileupload.js，结合JSP和服务器端的UploadUtil类，可以创建一个灵活的文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相比较提交表单实现文件上传，使用ajaxfileupload.js实现异步上传显得更加灵活。

下载ajaxfileupload.js并在页面中引用，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>
<script src="${ctx }/static/scripts/ajaxfileupload.js"></script>
<style>
.filebtn{
opacity:0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE6/IE7/8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*  IE8 */
width:70px;
position:absolute;
top:0;
left:0
}
</style>
</head>
<body>
<div>
<!--这里实现了兼容ie8下的文件上传，同时保持设计的样式-->
<span style="position:relative">
<input type="button" class="table-btn" value="选择文件" />
<input type="file" name='file' id='file' class="filebtn"/>
</span>
<input id="upfile" type="button" value="上传" class="table-btn" onclick="uploadPlanPic()" />
</div>
</body>
<script>
            //上传文件
        function uploadPlanPic() {
          var filepath=$("#file").val();
          if(filepath ==""){
            alert("请选择图片进行上传！");
            return; 
          }
          var extStart=filepath.lastIndexOf("."); 
          var ext=filepath.substring(extStart,filepath.length).toUpperCase(); 
          if(ext!='JPG'||ext!='GIF'||ext!='PNG'||ext!='BMP'){
                  alert('上传图片格式仅限于.jpg .gif .png .bmp');
            return;
          }
            $.ajaxFileUpload
            (
                {
                    url:'${ctx}/zxlr/ghxx/uploadPlanpicFile', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: 'file', //文件上传控件的id属性
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if (typeof (data.result) != 'undefined') {
                                if(data.result == "success")
                                {
                                  alert("文件上传成功！");
                                }else{  
                                  if(data.msg == "error1"){
                                    alert("上传失败，请上传小于10M的文件！");
                                  }else if(data.msg == "error3"){
                                alert("该文件名已经被使用");
                                  }else{
                                    alert("文件上传失败，请重新上传！");
                                  }
                                
                                }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert("文件上传失败，请重新上传！");
                    }
                }
            )
        }
</script>
</html>

服务器端代码：

@RequestMapping("/ghxx/uploadPlanpicFile")
    public String uploadContFile(HttpServletRequest request, HttpServletResponse response){
    	final String message = "";

        try {
            final MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            final MultipartFile myfile = multiRequest.getFile("file");
            final InputStream stream = myfile.getInputStream();
            final InputStream stream2 = myfile.getInputStream();
            final String vm = UploadUtil.validateImg(myfile, stream);

            if (!"success".equals(vm)) {
                UploadUtil.writeToPage(vm, response);
                return null;
            }

            final String filename = myfile.getOriginalFilename();
            //final String newfileName = UploadUtil.getOrderNum() + filename.substring(filename.lastIndexOf('.'));

            // 这里是物理路径，在实际环境中将配置虚拟路径
            final String filePath = UploadUtil.getPropertieValue("param.properties", "uploadPlanpic.path");

             StringUtil.checkDir(filePath);

             File file =new File(filePath +File.separator+ filename);
             String isExist = UploadUtil.validateExistOrNo(file);
             if (!"success".equals(isExist)) {
                 UploadUtil.writeToPage(isExist, response);
                 return null;
             }
             OutputStream bos = new FileOutputStream(file);

            int bytesRead = 0;
            final byte[] buffer = new byte[8192];
            while ((bytesRead = stream2.read(buffer, 0, 8192)) != -1) {
                bos.write(buffer, 0, bytesRead);// 将文件写入服务器
            }
            bos.close();
            stream2.close();
            stream.close();
            UploadUtil.writeToPage(UploadUtil.makeJsonResponse(true, filename), response);
            return null;

        } catch (final FileNotFoundException e) {
        	e.printStackTrace();
        } catch (final IOException e) {
        	e.printStackTrace();
        }
        UploadUtil.writeToPage(UploadUtil.makeJsonResponse(false, message), response);
    	return null;
    }

UploadUtil类：

package com.jusfoun.estate.util.common;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Properties;

import javax.servlet.http.HttpServletResponse;

import org.springframework.web.multipart.MultipartFile;

/**
 *上传文件工具类
 * @author bukai
 *
 */
public class UploadUtil {

    /**
     * 拼接json
     * @param result
     * @param message
     * @return
     */
    public static String makeJsonResponse(boolean result, String message) {
        if (result) {
            return "{\"result\":\"success\",\"msg\":\"" + message + "\"}";
        }
        return "{\"result\":\"faild\",\"msg\":\"" + message + "\"}";
    }

    /**
     *ajax打印到前台
     * @param content
     * @param response
     */
    public static void writeToPage(String content, HttpServletResponse response) {
        response.setCharacterEncoding("UTF-8");
        response.setHeader("Content-Type", "text/html; charset=UTF-8");
        PrintWriter pw = null;
        try {
            pw = response.getWriter();
            pw.write(content);
        } catch (final IOException e) {
        } finally {
            if (pw != null) {
                pw.flush();
                pw.close();
            }
        }
    }

    /**
     * 获取配置文件
     * @param propsName  配置文件名字
     * @return
     */
    public static String getPropertieValue(String propsName, String key) {
        try {
            InputStream inputStream;
            final ClassLoader cl = UploadUtil.class.getClassLoader();
            if (cl != null) {
                inputStream = cl.getResourceAsStream(propsName);
            } else {
                inputStream = ClassLoader.getSystemResourceAsStream(propsName);
            }
            final Properties dbProps = new Properties();
            dbProps.load(inputStream);
            inputStream.close();
            String p = dbProps.getProperty(key);
            return dbProps.getProperty(key);
        } catch (final Exception e) {
            // TODO: handle exception
        }
        return "";
    }

    /**
     *验证文件大小
     * @param myfile
     * @param stream
     * @return
     */
    public static String validateImg(MultipartFile myfile, InputStream stream) {
        try {
            final long size = myfile.getSize();
            if (size > (1024 * 1023 * 10)) {
                return UploadUtil.makeJsonResponse(false, "error1");
            }

        } catch (final Exception e) {
            e.printStackTrace();
        }
        return "success";
    }
    
    /**
     * 验证文件是否已经存在
     * @param file
     * @return
     */
    public static String validateExistOrNo(File file){
		if(file.exists()){       
			return UploadUtil.makeJsonResponse(false, "error3");
		}
    	return "success";
    }

    /**
     *判断字符串
     * @param s
     * @return
     */
    public static boolean isNull(String s) {
        if ((s == null) || s.equals("")) {
            return true;
        } else {
            return false;
        }
    }
}

StringUtil的checkDir方法：

/**
     * 检查文件夹是否存在， 不存在则创建
     *
     * @param path
     */
    public static void checkDir(String path) {
        File dir = new File(path);
        if (!dir.exists()) {
            dir.mkdirs();
        }
    }

param.properties的上传路径配置：