javascript - 在隐藏表单输入中附加文件名

Question

我目前正在使用拖放区上传文件，但是，我希望拖放区在成功上传文件后将隐藏的表单输入附加到我的主表单，以便表单将文件名附加到我的 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>

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

谁能告诉我原因吗？

谢谢!

Answer 1

我遇到了这个问题并按如下方式解决:

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

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

希望对其他人有帮助!