大家好所以有我的代码：
HTML:
<html>
<body>
<form enctype="multipart/form-data" method="post" name="image">
<input onchange="test();" type="file" accept="image/*" capture="camera" name="file" id="camera">
<input id="go" type="submit" value="Stash the file!" style="display: none;" />
</form>
<div id="output"></div>
</body>
<script src="./script.js"></script>
</html>
JS:
var form = document.forms.namedItem("image");
form.addEventListener('submit', function(ev) {
var
oOutput = document.getElementById("output"),
oData = new FormData(document.forms.namedItem("image"));
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "./upload.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br />";
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
function test() {
document.getElementById("go").click()
}
我的问题是它完全是功能性的，但很小。。。肮脏的
我试图用JSdocument.forms.namedItem("image").submit();提交表单，但EventListener没有抓住它。
我不想仅仅为了这个而把JQuery添加到我的项目中(对于那些使用JQuery的人来说(。
解决方案当然就在我眼前，但我找不到其他方法。
提前感谢大家。
我认为你可以这样简化：
function pleaseUpload() {
console.log('upload fonction ...');
}<html>
<body>
<form enctype="multipart/form-data" method="post" name="image">
<input onchange="pleaseUpload();" type="file" accept="image/*" capture="camera" name="file" id="camera">
</form>
<div id="output"></div>
</body>
<script src="./temp.js"></script>
</html>您混淆了form.submit()和submit按钮click。
不需要隐藏的提交按钮。
var output = document.getElementById("output");
var form = document.querySelector("form[name='image']");
form.addEventListener('submit', function(ev) {
ev.preventDefault();
var oOutput = document.getElementById("output")
var oData = new FormData(document.forms.namedItem("image"));
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "./upload.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br />";
}
};
oReq.send(oData);
}, false);
function test() {
form.submit();
output.textContent = "form submitted!";
}<form enctype="multipart/form-data" method="post" name="image">
<input onchange="test();" type="file" accept="image/*" capture="camera" name="file" id="camera">
</form>
<div id="output"></div>