[英]I have a form with the submit button linked to javascript function but nothing is happening when I click the submit button
[英]How do I call a Javascript function when I click a “Submit” button?
我正在尝试将拖放文件上传功能实现到网页中。 我在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按钮中调用它。
<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>
试试看,它对我有用:
<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>
这是该主题的教程的链接: 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();
}
);
}
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.