Question

我在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方法不允许”，请帮我????热切地等待积极回复.... 任何替代方式也热烈欢迎

Answer 1

这里有几件事。查看实际的HTML表单声明会很有帮助，包括#imageid输入的“name”和“accept”属性。看起来应该是这样的：

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

其次，在您的Ajax调用中，声明返回dataType始终是个好主意。在该调用旁边，在上传任何类型的文件时，应始终将缓存设置为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>

在没有表单提交的情况下在春天使用ajax jquery上传图像

1 个答案: