FormData对象实现文件Ajax上传
Posted Vincent
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于FormData对象实现文件Ajax上传的主要内容,如果未能解决你的问题,请参考以下文章