圖像上傳使用Ajax jQuery在春季沒有表格提交

我在做java項目。需要上傳圖像，而無需使用表單提交，並且只使用的jQuery ajax調用（因爲我需要處理回到同一頁的圖像）圖像上傳使用Ajax jQuery在春季沒有表格提交

我輸入標籤與類型=文件和

我已經加載了公地文件上傳，公共-io的罐子春Maven和還增加multipartResolver

現在，我使用下面的代碼的servlet

@RequestMapping(value = "/upload", method = RequestMethod.POST) 
@ResponseBody 
public Map<String, Object> upload(@RequestParam("file") MultipartFile file) { 
    Map<String, Object> map = Maps.newHashMap(); 
    try { 
    BufferedImage src = ImageIO.read(new ByteArrayInputStream(file.getBytes())); 
    File destination = new File("C:/Users/XXX/Desktop/Image_files/Image1.png"); 
    ImageIO.write(src, "png", destination); 
    } catch(Exception e) { 
     e.printStackTrace(); 
    } 
    return map; 
}

我的js文件

$("#uploadbutton").on("click", function() { 
var oMyForm = new FormData(); 
oMyForm.append("file", $("#imageid").prop("files")[0]); 
$.ajax({ 
    url: "/photo/upload/upload", 
    data: oMyForm, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function(response) { 
     alert("success"); 
    }, 
    error: function() { 
     alert("unable to create the record"); 
    } 
});

}）;

問題是我能夠在輸入類型=文件標籤中選擇圖像，但是當我點擊上傳按鈕時，onclick事件觸發器並不會發出ajax調用，顯示錯誤消息「405方法不允許」我喜歡嗎？急切地等待肯定的答覆....任何其他方式也熱烈歡迎

來源

2014-11-06 Srini

這裏有幾件事。查看您的實際HTML表單聲明會很有幫助，包括#imageid輸入的「名稱」和「接受」屬性。它應該是這個樣子：

<form id="uploadForm"> 
    <input type="file" name="myimage" id="imageid" accept=".png" /> 
</form>

其次，在你的Ajax調用，它總是一個好主意，有你的返回的數據類型聲明。在該調用旁邊，上傳任何類型的文件時，應始終將緩存設置爲false。

所以，你的聲明應該是這樣的：

$("#uploadbutton").on("click", function() { 
var formData = new FormData($('#uploadForm')[0]); 
$.ajax({ 
    url: "/photo/upload/upload", 
    type: "POST", 
    dataType: 'text', 
    contentType: false, 
    processData: false, 
    cache: false, 
    data: formData, 
    success: function(response) { 
     alert("success"); 
    }, 
    error: function() { 
     alert("unable to create the record"); 
    } 
});

在這種情況下，你的控制器方法聲明則是：

public Map<String, Object> upload(@RequestParam("myimage") MultipartFile file) { 
    //rest of the code goes here... 
}

最後，請問您是CommonsMultipartResolver聲明看起來像你的春天MVC XML文件？它應該看起來像這樣：

<bean id="multipartResolver" 
     class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 

    <!-- one of the properties available; the maximum file size in bytes --> 
    <property name="maxUploadSize" value="500000"/> 

</bean>

來源

2014-11-08 04:53:16

對我來說非常適合.... – Raj 2015-04-01 15:41:29

圖像上傳使用Ajax jQuery在春季沒有表格提交

回答

相關問題