Question

我正在尝试使用dropzone.js和PHP上传多个文件。这些文件未插入数据库中，并且我确定PHP代码是可以确定的，因此，我很确定我的js有问题。

这是我的代码：

<form id="quoteForm" action="/url" method="post" role="form" enctype="multipart/form-data" class="dropzone">
<div class="dropzone" id="dropzoneFrom">
</div>
<div id="preview">
</div>
<div id="dropzonePreviewTemplate" style="display: none">
  <div id="template-preview" class="dz-preview dz-nofile-preview">
    <input style="display:none"  name="file_c" id="file_c" type="file" multiple>
    <div class="small">
      <span class="" data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
    </div>
  </div>
</div>
<div class="row">
<div class="col-xs-24 text-center">
<button class="btn btn-success" id="sendForm" disabled="disabled"><?php echo _e('Submit Form'); ?></button>
</div>
</div>
</form>

js

Dropzone.options.dropzoneFrom = {
      url: "url.php",
      autoProcessQueue: false,
      paramName: "file_c",
      uploadMultiple: true,
      dictDefaultMessage:"<?php echo _e("Click here or drag and drop to upload your files"); ?>",
      addRemoveLinks: true,
      acceptedFiles: 'image/gif,image/png,image/bmp,image/tiff,image/x-icon,video/x-ms-asf,video/x-ms-wmv,video/x-ms-wmx,video/x-ms-wm,video/avi,video/divx,video/x-flv,video/quicktime,video/mpeg,video/mp4,video/ogg,video/webm,video/x-matroska,video/3gpp,video/3gpp2,text/plain,text/csv,text/tab-separated-values,text/calendar,text/richtext,text/css,text/html,text/vtt,application/ttaf+xml,audio/mpeg,audio/aac,audio/x-realaudio,audio/wav,audio/ogg,audio/flac,audio/midi,audio/x-ms-wma,audio/x-ms-wax,audio/x-matroska,application/rtf,application/javascript,application/pdf,application/x-shockwave-flash,application/java,application/x-tar,application/zip,application/x-gzip,application/rar,application/x-7z-compressed,application/x-msdownload,application/octet-stream,application/octet-stream,application/msword,application/vnd.ms-powerpoint,application/vnd.ms-write,application/vnd.ms-excel,application/vnd.ms-access,application/vnd.ms-project,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-word.document.macroEnabled.12,application/vnd.openxmlformats-officedocument.wordprocessingml.template,application/vnd.ms-word.template.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.ms-excel.sheet.binary.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.template,application/vnd.ms-excel.template.macroEnabled.12,application/vnd.ms-excel.addin.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-powerpoint.presentation.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.ms-powerpoint.slideshow.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.template,application/vnd.ms-powerpoint.template.macroEnabled.12,application/vnd.ms-powerpoint.addin.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.slide,application/vnd.ms-powerpoint.slide.macroEnabled.12,application/onenote,application/oxps,application/vnd.ms-xpsdocument,application/vnd.oasis.opendocument.text,application/vnd.oasis.opendocument.presentation,application/vnd.oasis.opendocument.spreadsheet,application/vnd.oasis.opendocument.graphics,application/vnd.oasis.opendocument.chart,application/vnd.oasis.opendocument.database,application/vnd.oasis.opendocument.formula,application/wordperfect,application/vnd.apple.keynote,application/vnd.apple.numbers,application/vnd.apple.pages',
      maxFiles: 10,
      init: function(){
        var submitButton = document.querySelector("#sendForm")
        myDropzone = this;
        submitButton.addEventListener("click", function() {
            myDropzone.processQueue(); 
        });

sendForm按钮和包含在此代码中，但写在另一个文件中。

Answer 1

我已经尝试了您的代码，但做了一些更改：

HTML：确保已加载dropzone.js
HTML：删除dropezone div
JavaScript：在末尾添加了2个缺少的花括号

工作正常。

Dropzone.options.dropzoneFrom = {
      url: "url.php",
      autoProcessQueue: false,
      paramName: "file_c",
      uploadMultiple: true,
      dictDefaultMessage:"Click here or drag and drop to upload your files",
      addRemoveLinks: true,
      acceptedFiles: 'image/gif,image/png,image/bmp,image/tiff,image/x-icon,video/x-ms-asf,video/x-ms-wmv,video/x-ms-wmx,video/x-ms-wm,video/avi,video/divx,video/x-flv,video/quicktime,video/mpeg,video/mp4,video/ogg,video/webm,video/x-matroska,video/3gpp,video/3gpp2,text/plain,text/csv,text/tab-separated-values,text/calendar,text/richtext,text/css,text/html,text/vtt,application/ttaf+xml,audio/mpeg,audio/aac,audio/x-realaudio,audio/wav,audio/ogg,audio/flac,audio/midi,audio/x-ms-wma,audio/x-ms-wax,audio/x-matroska,application/rtf,application/javascript,application/pdf,application/x-shockwave-flash,application/java,application/x-tar,application/zip,application/x-gzip,application/rar,application/x-7z-compressed,application/x-msdownload,application/octet-stream,application/octet-stream,application/msword,application/vnd.ms-powerpoint,application/vnd.ms-write,application/vnd.ms-excel,application/vnd.ms-access,application/vnd.ms-project,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-word.document.macroEnabled.12,application/vnd.openxmlformats-officedocument.wordprocessingml.template,application/vnd.ms-word.template.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.ms-excel.sheet.binary.macroEnabled.12,application/vnd.openxmlformats-officedocument.spreadsheetml.template,application/vnd.ms-excel.template.macroEnabled.12,application/vnd.ms-excel.addin.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-powerpoint.presentation.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.ms-powerpoint.slideshow.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.template,application/vnd.ms-powerpoint.template.macroEnabled.12,application/vnd.ms-powerpoint.addin.macroEnabled.12,application/vnd.openxmlformats-officedocument.presentationml.slide,application/vnd.ms-powerpoint.slide.macroEnabled.12,application/onenote,application/oxps,application/vnd.ms-xpsdocument,application/vnd.oasis.opendocument.text,application/vnd.oasis.opendocument.presentation,application/vnd.oasis.opendocument.spreadsheet,application/vnd.oasis.opendocument.graphics,application/vnd.oasis.opendocument.chart,application/vnd.oasis.opendocument.database,application/vnd.oasis.opendocument.formula,application/wordperfect,application/vnd.apple.keynote,application/vnd.apple.numbers,application/vnd.apple.pages',
      maxFiles: 10,
      init: function(){
        var submitButton = document.querySelector("#sendForm")
        myDropzone = this;
        submitButton.addEventListener("click", function() {
            myDropzone.processQueue(); 
        });
     }
}

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

<form id="quoteForm" action="/url" method="post" role="form" enctype="multipart/form-data" class="dropzone">
<div id="preview">
</div>
<div id="dropzonePreviewTemplate" style="display: none">
  <div id="template-preview" class="dz-preview dz-nofile-preview">
    <input style="display:none"  name="file_c" id="file_c" type="file" multiple>
    <div class="small">
      <span class="" data-dz-name></span> <span class="pull-right">(<span class="dz-size" data-dz-size></span>)</span>
    </div>
  </div>
</div>
<div class="row">
<div class="col-xs-24 text-center">
<button class="btn btn-success" id="sendForm" disabled="disabled"><?php echo _e('Submit Form'); ?></button>
</div>
</form>

使用dropzone上传文件时出现问题

1 个答案: