将上载的文件从一种“文件”类型输入重新分配给另一种

Question

我有一个用于迷你帖子的表单，设计希望表单内有一个图像文件上传器，并在用户选择图像文件后显示选定的图像以替换表单上传器。

现在，我打算在主表单之外（对于迷你帖子）使用另一种表单“图像上传”。 当用户选择文件时，将提交图像上传表单，并通过AJAX将文件保存到服务器。 图片上传表单中的字段将被隐藏。

当然，由于位置原因，我需要将图像文件选择器HTML放置在小文章表单的HTML内。 然后， 如何将通过主表单中的文件选择器选择的“文件”而不只是文件名重新分配给图像上传表单中的隐藏“文件”类型输入？

我不确定这是否可能。 如果不可能，那么对实现该设计有何建议？

Answer 1

使用@fauxerious：提供的方法：使用JQuery ajax发送该对象（用于Rails）：

$.ajax({
    type: 'post',
    url: //action to handle this ajax,
    data: formdata,  // formdata is obtained from handleForm()
                     // it has a property "file".
    contentType: false,
    processData: false,
    dataType: 'json', // get back json
    success: function(output) {
      alert(output);
    }
});

在Rails动作中，只需通过params[:file]访问此文件，然后使用CarrierWave进行处理。

Answer 2

您可能会使用FormData 。

function handleForm(){
    var formdata = new FormData();
    var file = $('input[type="file"]').prop('files')[0];
    if (file.type == 'image/jpeg') {
        formdata.append('file', file);
        return formdata;
    };
};

这带有一个返回的对象，您可以将它像数据一样从多部分表单传递到AJAX请求中。 我在这里添加了一个条件来检查jpeg，但您可能想使用自己的逻辑。