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

时间:2015-11-19 01:58:21

标签: javascript jquery html forms

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

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

当然,由于定位,我需要将图像文件选择器HTML放在迷你帖子格式的HTML中。然后,如何重新分配“文件”,而不仅仅是通过主窗体中的文件选择器选择的文件名到图像上传表单中隐藏的“文件”类型输入?

我不确定这是否可行。如果不可能,那么实施此设计的建议是什么?

2 个答案:

答案 0 :(得分:2)

使用@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进行处理。

答案 1 :(得分:1)

您可以使用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,但你可能想要使用自己的逻辑。