Question

我有注册表（Spring mvc应用程序），它有一些字段以及图像上传选项，我使用ajax通过serialize（）函数向控制器发送字段值

现在我想通过相同的请求发送图像，以及用户在向控制器发送请求之前应该由用户预览的图像。因此，对于预览，我将所选图像转换为字节代码并将其添加到图像标记的“src”属性

Jquery用于预览图像

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {

                    $('#imagePreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imgInput").change(function(){

            readURL(this);

        });

HTML图片和输入标记

<input name=file type="file" id="imgInput"></input>
<img id="imagePreview" src="" alt="Item Image" width="96" height="80"/>

通过上面的代码我能够得到预览。现在作为提交表单的要求的一部分，我需要发送表单字段以及图像，因为我正在使用图像标记的'src'属性中存在的字节代码，并使用ajax

Ajax表单提交

function saveCatalogueForm(){

        var catalogValue = $("#catalogueForm").serialize();
        var imageInByte =$('#imagePreview').attr('src');

        /* console.log(fd) */
        $.ajax({
            type: "POST",
            dataType : "json",
            url:"../catalogue/create.action?catalogValue="+catalogValue+"&fd="+imageInByte,
            success:function(response){
                alert("Submited Successfully");
            }
        });
    }

这是我的控制器

@RequestMapping( value="/catalogue/create.action", method=RequestMethod.POST)
    public @ResponseBody Long create(CatalogueBase catalogueForm,byte[] fd) throws Exception {  

        Long parentId = null;

        System.out.println(fd);


                // some logic goes hear 



        return parentId;
    }

我想要的。

上面的代码工作正常，对于较少kb的图像，如3-60 kb不超过，如果我发送超过那个，那么我将得到错误的响应400错误（我在apache server.xml页面中将POST大小增加到2mb ）...？

我正在写写方式或通过任何其他方式我可以通过ajax发送图像......？

任何帮助都将被挪用，谢谢

Answer 1

我在这里猜测，但似乎你将图像数据附加到网址上，你得到的是“请求uri太长”的错误错误。

您可能会遇到一些额外问题，因为图像数据未被转义。

尝试将您的数据作为POST数据发送：

function saveCatalogueForm(){

    var catalogValue = $("#catalogueForm").serialize();
    var imageInByte = encodeURIComponent($('#imagePreview').attr('src'));

    /* console.log(fd) */
    $.ajax({
        type: "POST",
        dataType : "json",
        data: "catalogValue="+catalogValue+"&fd="+imageInByte,
        url:"../catalogue/create.action",
        success:function(response){
            alert("Submited Successfully");
        }
    });
}

如何使用ajax和jquery将图像保存到另一个文件夹

1 个答案: