FormData对象实现文件Ajax上传

后台：

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

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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;

/**
 * 
 * @Description :文件上传
 * @version : 1.0
 * @Date : 2016年4月28日 下午1:17:53
 */
@Controller
@RequestMapping("/upload")
public class UploadController extends BaseController {
    private static final Logger log = LoggerFactory.getLogger(UploadController.class);
    @RequestMapping("/index")
    public String index() {
        return "upload/upload";
    }

    /**
     * 上传
     * 
     * @param files
     * @param request
     * @param response
     * @return
     */
    @RequestMapping("/files")
    public @ResponseBody String file(@RequestParam MultipartFile[] files, HttpServletRequest request,
            HttpServletResponse response, String path) {
        String url = "";
        try {
            // 
            for (MultipartFile file : files) {
                // 此处编写业务代码处理，组合url
                

            }
            System.out.println("上传文件路径：" + url);
            return url.substring(0, url.length() - 1);
        } catch (Exception e) {
            e.printStackTrace();
            log.error(e.getMessage(), e);
        }
        return url;
    }
}

 

页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>上传文件</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript"
    src="<%=path%>/resources/js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $("#upload").click(function() {
            //FormData支持文件ajax上传
            //使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：
            //processData: false,  // 告诉jQuery不要去处理发送的数据
            //contentType: false   // 告诉jQuery不要去设置Content-Type请求头
            //支持浏览器：Chrome 7+, Firefox(2.0) 4.0, Internet Explorer 10+, Opera 12+,Safari 5+
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url : "<%=path%>/upload/files.html",
                data : formData,
                type : "post",
                dataType : "text",
                timeout : 3600000,
                async : true,
                cache : false,
                contentType : false,
                processData : false,
                success : function(data) {
                    if (data == "") {
                        alert("上传文件失败！");
                    } else {
                        $("#url").text(data);
                    }
                },
                error : function(data) {
                    alert(data);
                }
            });
        });

    });
</script>

</head>

<body>
    <center>
        <form id="uploadForm" enctype="multipart/form-data" method="post">
            选择文件：<input type="file" name="files" multiple="multiple"><br />
            <br /> <input type="button" value="上传" id="upload">
        </form>
        上传成功文件路径：<label id="url" />
    </center>
</body>
</html>

 

posted @ 2016-05-17 15:41  Vincent-Li  阅读(258)  评论(0)  编辑  收藏  举报