在隐藏表单输入中附加文件名答案

【问题标题】：append filename in hidden form input在隐藏表单输入中附加文件名
【发布时间】：2014-12-17 01:31:08
【问题描述】：

我目前正在使用放置区上传文件，但是，我希望放置区在成功上传文件后将隐藏的表单输入附加到我的主表单，以便表单将文件名附加到我的 sql 数据库。因此，这是我正在使用的代码：

<script>

Dropzone.options.imageuploaddrop = {

    paramName: "fileimage",
  maxFilesize: 10, // MB
   autoProcessQueue: false,
  uploadMultiple: false,
  maxFiles: 1,
  addRemoveLinks: true,
  clickable:true,
  acceptedFiles:".jpg,.png,.jpeg,.tif",
  dictInvalidFileType:"Invalid File Type. Only Jpg, Png and Tif are supported.",
  dictFileTooBig:"File too Big. Maximum 10 MB!",
  dictMaxFilesExceeded:"We only need one image.",

 init: function() {
    var myDropzone = this;
    $(function(){
setInterval(oneSecondFunction, 1);
});
function oneSecondFunction() {
 if (myDropzone.getAcceptedFiles().length === 0) {
                variable2=0;

            }else {
                variable2=1;
            }
}



document.getElementById("submit").addEventListener("click", function(e) {               
    // First change the button to actually tell Dropzone to process the queue.
 if (myDropzone.getQueuedFiles().length == 1) { 
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();                    
      myDropzone.processQueue();  

 }
     });



    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
    });
     this.on('success', function(file, response) {
    // If you return JSON as response (with the proper `Content-Type` header
    // it will be parsed properly. So lets say you returned:
    // `{ "fileName": "my-file-2234.jpg" }`

    // Create a hidden input to submit to the server:
    ***$("#ideaform").append($('<input type="hidden" ' +
                                      'name="files[]" ' +
                                      'value="' + response.fileName + '">'));***
    });


    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  }

}


</script>

如您所见，我正在使用成功事件来附加额外的文件字段，但在我看来，文件名并未被附加，尽管实际上正在添加隐藏字段。

谁能说明原因？

谢谢！

【问题讨论】：

您可以尝试在开始发送之前添加隐藏字段吗？你在onsuccess 中找到了它，我认为它是在它被发布到服务器端代码之后？
如果隐藏的输入被附加，那么错误在于检索文件名值。我不熟悉放置区或文件上传，但我建议尝试让文件名显示并从那里开始。也许 response.fileName 是错误的方法。也许它应该是 file.name 例如...
@Papa，您好，我只想在文件上传成功时附加该字段。谢谢。
我感觉可能是方法的问题。

标签： javascript jquery forms dropzone.js

【解决方案1】：

我遇到了这个问题，解决方法如下：

$("#ideaform").append($('<input type="hidden" ' +
'name="files[]" ' +
'value="' + response['filename'] + '">'));

您可以将隐藏更改为文本以在测试时看到该字段出现在页面上。

希望对其他人有所帮助！

【讨论】：