單擊“提交”按鈕時如何調用Javascript函數？

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（即form元素）中的按鈕非常有效。 如果您希望按鈕位於form元素之外，那么我可以使用click事件來完成它：

首先，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>