如何使用JavaScript将文件上载路径附加到表单?

时间:2014-09-10 16:05:29

标签: javascript php jquery forms

下面是我在一个表单上处理文件上传的一些jQuery / JavaScript代码。用户可以根据需要上传任意数量的文件,在上传文件后,我会在Div中显示上传文件的预览图像。

我需要帮助的是,我需要以某种方式将上传的文件添加到隐藏的表单字段中,这样当他们提交表单时,它将发布与其他文件一起上传的每个文件的文件名/路径将数据表单到我的后端PHP脚本。

我还不确定最好的方法吗?

我在想这样的事可能有用......

<input type="text" name="uploads[]" id="uploads" value="FILE PATH HERE">

但我不确定如果有超过1次上传的话,每次添加新文件时是否会覆盖以前的值?

有关如何处理此问题的任何想法?我真正需要的是在提交表单后访问后端中每个上传文件的文件名。

jQuery(function () {
    jQuery('#fileupload').fileupload({
        url: '<?php echo Mage::getUrl('signwizard/index/saveFile') ?>',
        sequentialUploads: true,
        dataType: 'json',
        dropZone: jQuery('#dropzone'),
        pasteZone: jQuery(document),
        autoUpload: true,

        done: function (e, data) {
            jQuery.each(data.result.files, function (index, file) {
                jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));


                // Add Uploaded image path and name to a Form field so thatr the file path will be posted when the Form is submitted.....

            });
        }
    });
});

1 个答案:

答案 0 :(得分:1)

要详细说明我的评论,只要您为每个文件附加新输入,就可以了:

done: function (e, data) {
    jQuery.each(data.result.files, function (index, file) {
         jQuery('<div/>').html('<img src="/channelUploads/thumbnail/'+file.name+'"> '+file.name).appendTo(jQuery('#imageContainer'));

         jQuery('#yourformid').append('input type="hidden" name="uploads[]" value="'+file.name+'">');

     });
}