当我点击“提交”按钮时，如何调用Javascript函数？

问题描述：

我想实现拖放文件上传功能到网页中。我有一个dropzone.js文件这个javascript函数：当我点击“提交”按钮时，如何调用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按钮调用此文件。

您是否阅读过说明？它特别声明：“Dropzone不处理你在服务器上的文件上传，你必须实现代码来自己接收和存储文件。” – alfasin 2013-04-22 05:55:58

我的确看过说明。如果我立即上传文件，那么现在它们会保存到本地计算机上的文件夹中。我想要做的只是在点击提交按钮后才保存它们。 – ahabos 2013-04-22 06:10:51

这个[link]（https://github.com/enyo/dropzone/issues/62）解决了同样的问题。它会禁用自动上传并在点击时手动上传。 – anpsmn 2013-04-22 06:51:08

答

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

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

答

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

答

尝试了这一点，它的工作对我来说：

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

答

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

答

下面是一个教程链接主题：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(); 
       } 
      ); 

     } 

     }

当我点击“提交”按钮时，如何调用Javascript函数？

相关推荐