dowy77780
dowy77780
2014-09-10 16:05

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

已采纳

Below is some jQuery/JavaScript code I have that handles file uploads on a Form I have. The user can upload as many files as they need to, after they upload a file, I show a preview image of the uploaded file in a Div.

What I need help with, is I need to somehow add the files that are uploaded, to a hidden form field so when they submit the Form, it will post the file name/path of each file that was uploaded with the other Form data to my backend PHP script.

I'm just not sure on the best way to do this?

I was thinking something like this might work...

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

But i'm not sure if this would overwrite previous values each time a new file was added if there is more then 1 upload?

Any ideas on how to handle this? All I really need is to access the filename of each uploaded file in the backend once the Form is submitted.

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条回答

  • douyan2821 douyan2821 7年前

    To elaborate on my comment, as long as you append a new input for each file, you are good to go:

    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+'">');
    
         });
    }
    
    点赞 评论 复制链接分享