1. 程式人生 > >通過formdata ajax上傳圖片 以及後臺接收formdata資料 mvc

通過formdata ajax上傳圖片 以及後臺接收formdata資料 mvc

最近一直研究如何通過ajax上傳圖片看了好對用formdata來實現 但是關於springmvc後臺如何接收formdata的資料一直沒有介紹 今天把後臺接收資料也寫下來了 。

有點不完整  但是是能夠實現的   相信有能看懂的  大家見諒  帶有顏色的標記注意一下

                  <form class="inpform" id="uploadForm" enctype="multipart/form-data">
                        <div class="f-inp">
                            <div>&#12288;<i>診所名稱:</i>
                                <input type="text"  name="name

" id="name"  >
                            </div>
                            <div>&#12288;<i>診所地址:</i>
                                <input type="text"  name="addrInfo"  id="addrInfo" >
                            </div>
       
                            <h4>Logo</h4>  
                      <input type="file" id="file
" name="file" />
                        </div>
                    </form>
       <input  type="button" value="提交" onclick="add();">

js如下

function add(){
     var formData = new FormData($("#uploadForm")[0]);//用form 表單直接 構造formData 物件; 就不需要下面的append 方法來為表單進行賦值了。 
     $.ajax({
         async: false,//要求同步 不是不需看你的需求
         url : "app/gexingSet.htmls",  
         type : 'POST',  
         data : formData,  
         processData : false,  //必須false才會避開jQuery對 formdata 的預設處理   
         contentType : false,  //必須false才會自動加上正確的Content-Type
         success : function(result) {  
                if(result==1){
                    forward=true;
                }else{
                    
                    $(".myModal-click").trigger("click");
                    forward=false;
                }
         },  
         error : function(result) {  
             $(".myModal-click").trigger("click");
                forward=false;
         }  
     });  
    
}

spring mvc 處

@Controller
@RequestMapping("/app")
public class ClinicController {

     @ResponseBody
    @RequestMapping("gexingSet.htmls")
    public int gexingSet1(
            @RequestParam(value = "file", required = false)MultipartFile file,
            String name, String addrInfo, HttpServletRequest request) {  //name和addrinfo是表單提交的資料 因為檔案上傳有可能帶有其他引數   但是名字要與表單裡的名字一樣
        String fileName = file.getOriginalFilename(); //獲取檔名
        if (!file.isEmpty()) {
            String path = “”;//寫你的路徑 這裡不寫了
            File targetFile1 = new File(path, fileName);
            OutputStream out;

InputStream in;             

  try {    
                    byte[] buf = file.getBytes();//檔案二進位制

         while ((length = in.read(buf)) != -1) {
                    out.write(buf, 0, length);
                }
                out.flush();
                in.close();
                out.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
             
        }
    
    }