1

我正在尝试将拖放文件上传功能实现到网页中。我在 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 按钮调用它。

4

5 回答 5

2 
<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>
于 2013-08-13T11:09:38.010 回答
0

以下是有关该主题的教程的链接：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();
                }
            );

        }

      }
于 2013-12-01T06:28:16.360 回答
0

试试这个，它对我有用：

<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>
于 2013-06-27T18:22:52.723 回答
-1 
<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>
于 2013-04-22T06:00:21.597 回答
-1

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

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

于 2013-04-22T05:52:10.940 回答