Question

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

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

任何人都可以建议为什么？

谢谢！

Answer 1

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

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

您可以将隐藏更改为文本，以便在测试时查看页面上显示的字段。

希望能帮到别人！

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

1 个答案: