Question

我正在尝试将拖放文件上传功能实现到网页中。我在dropzone.js文件中有这个javascript函数：

Dropzone.prototype.processFile = function(file) {
  this.filesProcessing.push(file);
  file.processing = true;
  this.emit("processingfile", file);
  return this.uploadFile(file);
};

我在我的html文件中有这个：

<script src="dropzone.js"></script>
<input type="submit" class="btn" value="Submit" />

我从http://www.dropzonejs.com下载了Dropzone.js文件，以便在我的页面中实现。 Dropzone具有在文件被拖放到页面后立即开始上载文件或等到用户调用上述功能的功能。

点击“提交”按钮后如何调用该功能？我很不熟悉dropzone的功能。 dropzone.js创建者的说明我应该调用“myDropzone.processFile（file）;”如果我不希望dropzone在文件被放入元素后立即开始上传，但我不知道如何从我的html按钮调用它。

Answer 1

<div id="previews" class="dropzone-previews"></div>


<button id="clickable">Click me to select files</button>

<script>
  new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/url", // Set the url
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: "#clickable" // Define the element that should be used as click trigger to select files.
  });
</script>

Answer 2

试试这个，它对我有用：

<form id="my-dropzone" class="dropzone" action="file-upload.php"></form>
<input type="button" value="Upload Files" onclick="uploadClicked()" />
<script type="text/javascript" src="dropzone.js"></script>
<script type="text/javascript">
    Dropzone.options.myDropzone = {
        maxFilesize: 2, // MB,
        enqueueForUpload: false
    };

    function uploadClicked() {
        var dz = Dropzone.forElement("#my-dropzone");
        for (var i = 0; i < dz.files.length; i++) {
            dz.filesQueue.push(dz.files[i]);
        }
    dz.processQueue();
    }
</script>

Answer 3

以下是有关此主题的教程的链接：http://bit.ly/1jVOKfd

我发现教程中的示例脚本适用于嵌入dropzone的按钮（即表单元素）。如果您希望在表单元素外部使用该按钮，我可以使用单击事件来完成它：

首先，HTML：

      <form id="my-awesome-dropzone" action="/upload" class="dropzone">  
        <div class="dropzone-previews"></div>
        <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
        </div>

      </form>
      <button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

然后，脚本标签....

      Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

        // The configuration we've talked about above
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 25,
        maxFiles: 25,

        // The setting up of the dropzone
        init: function() {
          var myDropzone = this;

         // Here's the change from enyo's tutorial...

            $("#submit-all").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
                }
            );

        }

      }

Answer 4

必须有一些dropzone初始化代码，可能已在onLoad事件中调用。首先禁用它，然后调用

document.getElementById("btnSubmit").onclick = Dropzone.prototype.processFile ;

Answer 5

<script>
function js_fun()
{
//do manipulations here and return true on success and false on failure 
}
</script>
<form method='get' onsubmit='return js_fun()'>
<input type='submit'/>
</form>

点击“提交”按钮后如何调用Javascript函数？

5 个答案: