springmvc+jquery+ajaxfileupload.js实现带有文本域的文件上传

来源：互联网发布：淘宝助手上传成功错误编辑：程序博客网时间：2024/06/07 02:08

最近项目中做的有部分是文件上传，一个表单中有文本域text，复选框checkbox等，还有一个文件域file，这样的文件上传，直接使用form提交即可，但是在该项目中，要求，文件上传要用ajax，因为这样可以得到后台的返回值，前台页面会有提示，达到一个好的用户体验效果，但是这样，就不能直接使用form提交表单，而要使用ajax提交，而ajax是无法传文件的，jquery的post请求依旧无法达到要求，因此，就在网上找找一些ajax插件，在网上找了不少的博客，但是貌似没有一些范例，有点不好下手。看了不少的博客，还是自己摸索着来实现，最终选择了ajaxfileupload.js来做插件，来实现这个功能，下面直接上代码。

前台页面代码：

<%@ 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><title>JQuery ajaxfileupload文件上传</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript"    src="<%=request.getContextPath()%>/js/jquery/jquery-1.9.1.js"></script><script type="text/javascript"    src="<%=request.getContextPath()%>/js/jquery/ajaxfileupload.js"></script><script type="text/javascript">    function ajaxFileUpload() {        $.ajaxFileUpload({            url : 'springmvc/upload2',            secureuri : false,            fileElementId : 'fileToUpload',            dataType : 'json',            data : {                name : $('#name').val()            },            success : function(data, status) {                var message = data['message'];                var code = data['code'];                if (code==200) {                    alert("操作成功！");                }else{                    alert("处理异常！");                }            },            error : function(data, status, e) {                alert("上传发生异常");            }        })        return false;    }</script></head><body>    <h2>JQuery ajaxfileupload文件上传</h2>    <img id="loading" src="images/loading.gif" style="display: none;">    用户信息：    <br /> 姓名：    <input id="name" name="name" type="text">    <br /> 附件：    <input id="fileToUpload" name="file1" type="file" class="input">    <br />    <br>    <br>    <input type="button" onclick="return ajaxFileUpload();" value="上传">    <br /> 上传进度：    <label id="fileUploadProcess"></label></body></html>

spring controller中的代码：

package com.tgb.web.controller.annotation.upload;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.Writer;import java.util.Date;import java.util.Iterator;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.IOUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import org.springframework.web.multipart.commons.CommonsMultipartFile;import org.springframework.web.multipart.commons.CommonsMultipartResolver;@Controller@RequestMapping("/springmvc")public class UploadController {    @RequestMapping("/upload")    public String addUser(@RequestParam("file") CommonsMultipartFile[] files,            HttpServletRequest request) {        System.out.println("==============================");        for (int i = 0; i < files.length; i++) {            System.out.println("fileName---------->"                    + files[i].getOriginalFilename());            if (!files[i].isEmpty()) {                int pre = (int) System.currentTimeMillis();                try {                    // 拿到输出流，同时重命名上传的文件                    FileOutputStream os = new FileOutputStream("H:/"                            + new Date().getTime()                            + files[i].getOriginalFilename());                    // 拿到上传文件的输入流                    FileInputStream in = (FileInputStream) files[i]                            .getInputStream();                    // 以写字节的方式写文件                    int b = 0;                    while ((b = in.read()) != -1) {                        os.write(b);                    }                    os.flush();                    os.close();                    in.close();                    int finaltime = (int) System.currentTimeMillis();                    System.out.println(finaltime - pre);                } catch (Exception e) {                    e.printStackTrace();                    System.out.println("上传出错");                }            }        }        return "/success";    }    @RequestMapping("/upload2")    public void upload2(HttpServletRequest request, HttpServletResponse response)            throws IllegalStateException, IOException {        System.out.println("upload2 start work.....");        String name = request.getParameter("name");        System.out.println(name);        // 创建一个通用的多部分解析器        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(                request.getSession().getServletContext());        // 判断 request 是否有文件上传,即多部分请求        if (multipartResolver.isMultipart(request)) {            // 转换成多部分request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            // 取得request中的所有文件名            Iterator<String> iter = multiRequest.getFileNames();            while (iter.hasNext()) {                // 记录上传过程起始时的时间，用来计算上传时间                int pre = (int) System.currentTimeMillis();                // 取得上传文件                MultipartFile file = multiRequest.getFile(iter.next());                if (file != null) {                    // 取得当前上传文件的文件名称                    String myFileName = file.getOriginalFilename();                    // 如果名称不为“”,说明该文件存在，否则说明该文件不存在                    if (myFileName.trim() != "") {                        System.out.println(myFileName);                        // 重命名上传后的文件名                        String fileName = "demoUpload"                                + file.getOriginalFilename();                        // 定义上传路径                        String path = "E:/" + fileName;                        File localFile = new File(path);                        file.transferTo(localFile);                    }                }                // 记录上传该文件后的时间                int finaltime = (int) System.currentTimeMillis();                System.out.println(finaltime - pre);            }        }        responseMessage(response);    }    private void responseMessage(HttpServletResponse response) {        response.setCharacterEncoding("utf-8");        response.setContentType("text/html; charset=" + "utf-8");        Writer writer = null;        try {            writer = response.getWriter();            writer.write("{\"code\":" + 200 + ",\"message\":\"" + "上传成功"                    + "\"}");            writer.flush();            writer.close();        } catch (Exception e) {            e.printStackTrace();        } finally {            IOUtils.closeQuietly(writer);        }    }}

spring mvc相关配置，在spring的配置文件中配置如下：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <property name="defaultEncoding" value="utf-8"></property>         <property name="maxUploadSize" value="10485760000"></property>        <property name="maxInMemorySize" value="40960"></property>   </bean>

这样支持文件上传，上传文件依赖jar包包括：
commons-fileupload-1.2.2.jar
commons-io-2.4.jar

详细代码在：http://download.csdn.net/detail/wolf_soul/8997787，免费下载。

0 0