html5+FormData 实现ajax文件上传

女爷i 2021-06-24 14:34 499阅读 0赞

大家都知道在html4时代，上传只能使用表单post提交方式，无法使用ajax(XMLHttpRequest )直接进行表单提交。但在HTML 5的概念形成后，W3C开始考虑标准化XMLHttpRequest Level接口，配合FormData即可实现ajax文件上传。

1、upload.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>IIS系统</title>
    	<script type="text/javascript" src="<%=basePath %>js/easyui1.4/jquery.min.js"></script>
    	<script>
    	/**  
         * ajax 上传。  
         */  
        function uploadByForm() {  
            var formData = new FormData($("#myForm")[0]);
            //用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。  
            //var formData = new FormData();//构造空对象，下面用append 方法赋值。  
    //      formData.append("policy", "");  
    //      formData.append("signature", "");  
    //      formData.append("file", $("#file_upload")[0].files[0]);  
            var url = "<%=basePath %>upload";  
            $.ajax({  
                url : url,  
                type : 'POST',  
                data : formData,  
                /**   
                 * 必须false才会避开jQuery对 formdata 的默认处理   
                 * XMLHttpRequest会对 formdata 进行正确的处理   
                 */  
                processData : false,  
                /**   
                 *必须false才会自动加上正确的Content-Type   
                 */  
                contentType : false,  
                success : function(responseStr) {  
                                    alert("成功：" + JSON.stringify(responseStr));  
                    //                  var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");  
                },  
                error : function(responseStr) {  
                    alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。  
                }  
            });  
        }  
    
    		
    	</script>
    </head>
    <body style="height:100%;width:100%;overflow:hidden;border:none;" >
    	<form id="myForm"  action="http://v0.api.upyun.com/xxx" method="post" enctype="multipart/form-data">  
              <div class="form-group">  
                   <label class="col-sm-2 control-label">说明:</label>  
                   <div class="col-sm-10">  
                                <p class="form-control-static ">ajax 文件上传 。</p>  
                   </div>  
              </div>  
              <div class="form-group">  
                  <label for="url" class="col-sm-2 control-label"><s>*</s>图片选择:</label>  
                  <div class="col-sm-7">  
                                <input type="file" name="file" id="file_upload" value=""  
                                    class="form-control" placeholder="图片地址">  
                                <input type="text" name="name" value="abc">
                  </div>  
              </div>  
      
              <div class="form-group">  
                   <div class="col-sm-offset-2 col-sm-7">  
                        <a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"  
                                    οnclick="uploadByForm();">Ajax上传</a>  
                    </div>  
              </div>  
         </form> 
    </body>
    </html>

2、springmvc的UploadController：

@Controller
    public class UploadController {
    	@RequestMapping(value = "/upload")  
    	@ResponseBody
        public ResultMessage upload(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, ModelMap model) {  
    		String anme = request.getParameter("name");
            System.out.println("开始");  
            String path = "D:\\iis\\uploadFiles";  
            String fileName = file.getOriginalFilename();  
    //        String fileName = new Date().getTime()+".jpg";  
            System.out.println(path);  
            File targetFile = new File(path, fileName);  
            if(!targetFile.exists()){  
                targetFile.mkdirs();  
            }  
      
            //保存  
            try {  
                file.transferTo(targetFile);  
                return new ResultMessage(0,"成功...");
            } catch (Exception e) {  
                e.printStackTrace();  
                return new ResultMessage(1,"失败....");
            }  
      
        }   
    }