Html 单击“提交”按钮时如何调用 Javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16140166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I call a Javascript function when I click a "Submit" button?
提问by ahabos
I am trying to implement Drag and Drop file upload functionality into a webpage. I have this javascript function in a dropzone.js file:
我正在尝试将拖放文件上传功能实现到网页中。我在 dropzone.js 文件中有这个 javascript 函数：
Dropzone.prototype.processFile = function(file) {
this.filesProcessing.push(file);
file.processing = true;
this.emit("processingfile", file);
return this.uploadFile(file);
};
And I have this in my html file:
我的 html 文件中有这个：
<script src="dropzone.js"></script>
<input type="submit" class="btn" value="Submit" />
I downloaded the Dropzone.js file from http://www.dropzonejs.comto implement in my page. The Dropzone has the functionality to either start uploading files as soon as they are dropped onto the page or wait until the user calls the function mentioned above.
我从http://www.dropzonejs.com下载了 Dropzone.js 文件以在我的页面中实现。Dropzone 具有在文件被拖放到页面后立即开始上传文件或等到用户调用上述函数的功能。
How do I call the function when I click the "Submit" button? I'm pretty unfamiliar with how the dropzone thing really works. The instructions from the creator of dropzone.js say I should call "myDropzone.processFile(file);" if I don't want the dropzone to immediately start uploading as soon as files are dropped into the element, but I'm not sure how to call this from my html button.
单击“提交”按钮时如何调用该函数？我对 dropzone 的实际工作原理非常陌生。dropzone.js 创建者的说明说我应该调用“myDropzone.processFile(file);” 如果我不希望 dropzone 在文件放入元素后立即开始上传，但我不确定如何从我的 html 按钮调用它。
回答by Shemeer M Ali
<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>
回答by kablamus
Here's a link to a tutorial on the subject: http://bit.ly/1jVOKfd
这是有关该主题的教程的链接：http: //bit.ly/1jVOKfd
I found that the sample script in the tutorial worked well for a button embedded in the dropzone (i.e., the form element). If you wish to have the button outside the form element, I was able to accomplish it using a click event:
我发现教程中的示例脚本对于嵌入在 dropzone 中的按钮（即表单元素）运行良好。如果您希望将按钮放在表单元素之外，我可以使用单击事件来完成它：
First, the HTML:
首先，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>
Then, the script tag....
然后，脚本标签....
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();
}
);
}
}
回答by roscioli
Try this out, it worked for me:
试试这个，它对我有用：
<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>
回答by Techmaster
There must be some initialization code for dropzone, that might have been called in onLoad event. first disable that and then call the
必须有一些 dropzone 的初始化代码，它们可能在 onLoad 事件中被调用。首先禁用它，然后调用
document.getElementById("btnSubmit").onclick = Dropzone.prototype.processFile ;
document.getElementById("btnSubmit").onclick = Dropzone.prototype.processFile ;
回答by user1370510
<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>
