春季使用ajax jquery上传图片，无需表单提交答案

【问题标题】：Image upload using ajax jquery in spring without Form submit春季使用ajax jquery上传图片，无需表单提交
【发布时间】：2015-01-03 00:17:14
【问题描述】：

我在 Spring java 中做项目。需要在不使用表单提交的情况下上传图像，并且只使用 jquery 的 ajax 调用（因为我需要在同一页面中处理回图像）

我有 type=file 和
的输入标签
我已经在 spring maven 中加载了 commons-fileupload, commons-io jar 并且还添加了 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 方法不允许”，请帮我一个忙？？？急切地等待肯定的答复....任何替代方式也热烈欢迎

【问题讨论】：

标签： java jquery spring image-uploading jquery-file-upload

【解决方案1】：

这里有几件事。查看您的实际 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 声明在 Spring 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>

【讨论】：