"제출"버튼을 클릭하면 어떻게 자바 스크립트 기능을 호출합니까?

Question

드래그 앤 드롭 파일 업로드 기능을 웹 페이지에 구현하려고합니다. 나는 dropzone.js 파일이 자바 스크립트 함수가 있습니다

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

onLoad 이벤트에서 호출되었을 수있는 dropzone에 대한 초기화 코드가 있어야합니다. 먼저 해제 한 후

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

자습서의 샘플 스크립트가 포함 된 버튼에 대해 잘 작동하는 것으로 나타났습니다. 드롭 존 (즉, 폼 요소)에서. 의 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> 

그런 다음 스크립트 태그 ....

양식 요소 외부 버튼를 원하는 경우에, 나는 click 이벤트를 사용하여 달성 할 수 있었다

 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(); 
       } 
      ); 

     } 

     }