如何使用JavaScript將文件上傳路徑附加到窗體？

下面是一些jQuery/JavaScript代碼，我可以在窗體上處理文件上傳。用戶可以根據需要上傳儘可能多的文件，上傳文件後，我會在Div中顯示上傳文件的預覽圖像。如何使用JavaScript將文件上傳路徑附加到窗體？

我需要幫助的是，我需要以某種方式將上傳的文件添加到隱藏的表單字段，因此當他們提交表單時，它會發布每個上傳文件的文件名/路徑其他表單數據到我的後端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..... 

      }); 
     } 
    }); 
});

來源

2014-09-10 JasonDavis

你的建議的輸入應該工作正常* - 你嘗試了嗎？ *你不應該複製id，並且應該使用type =「hidden」 – Steve 2014-09-10 16:08:54

要闡述我的意見，只要你添加的每個文件的新輸入，你是好去：

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+'">'); 

    }); 
}

來源

2014-09-10 16:15:47 Steve

如何使用JavaScript將文件上傳路徑附加到窗體？

回答

相關問題