當我點擊「提交」按鈕時，如何調用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" /> 

我下載了Dropzone.js從http://www.dropzonejs.com文件在我的網頁來實現。 Dropzone具有在文件被放入頁面時立即開始上傳文件或等待用戶調用上述功能的功能。

當我點擊「提交」按鈕時，該如何調用該函數？我很不熟悉dropzone的真實工作原理。來自dropzone.js創建者的指示說我應該調用「myDropzone.processFile（file）;」如果我不希望dropzone在文件被放入元素時立即開始上傳，但我不知道如何從我的html按鈕調用此文件。

Answer 1

dropzone必須有一些初始化代碼，可能在onLoad事件中被調用。第一禁用，然後調用

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

Answer 2

<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> 

Answer 3

嘗試了這一點，它的工作對我來說：

<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 4

<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 5

下面是一個教程鏈接主題：http://bit.ly/1jVOKfd

我發現本教程中的示例腳本適用於嵌入按鈕在dropzone（即表單元素）中。如果您希望表單元素外的按鈕，我可以用一個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(); 
       } 
      ); 

     } 

     }