JavaScript:onchange 函数导致错误/不起作用 [英] JavaScript : onchange function causes error/ didn't work
本文介绍了JavaScript:onchange 函数导致错误/不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下代码将添加文件上传和预览字段.
<b>这个单一的 img 有效,但在 js 中无效</b><br><img id="img" alt="你的图片" width="100" height="100"/><input type="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])"><br/>没有 Img <input type="text" id="noi" name="noi" value="" onkeyup="addFields()"><br/><脚本>函数 addFields(){//要创建的输入数var number = document.getElementById("noi").value;//容器 将放置动态内容的位置var container = document.getElementById("container");var array = ["CRICTICAL","HIGH","LOW","INFO"];//清除容器之前的内容而 (container.hasChildNodes()) {container.removeChild(container.lastChild);}for (i=1;i<=number;i++){var img = document.createElement("img");img.width="100";img.height="100";img.id="img"+i;var upload = document.createElement("输入");上传类型=文件";//这部分不工作_______________upload.onchange="document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])";//________________________________________container.appendChild(img);container.appendChild(上传);container.appendChild(document.createElement("br"));}}<div id="容器"/>问题:
如果没有 Container appendChild 函数,代码运行良好,您可以在前三行代码中看到.
解决方案 你必须在 upload.onchange
中运行一个函数.像这样:
upload.onchange= function () {document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])}
其他方式:
upload.addEventListener('change', function () {document.getElementById(img.id).src =window.URL.createObjectURL(this.files[0])})
The Following code will add File upload and preview field.
<b>This single img works but not in js</b> <br>
<img id="img" alt="your image" width="100" height="100" />
<input type="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0])">
<br/>
No of Img <input type="text" id="noi" name="noi" value="" onkeyup="addFields()">
<br />
<script>
function addFields(){
// Number of inputs to create
var number = document.getElementById("noi").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
var array = ["CRICTICAL","HIGH","LOW","INFO"];
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=1;i<=number;i++){
var img = document.createElement("img");
img.width="100";
img.height="100";
img.id="img "+i;
var upload = document.createElement("input");
upload.type="file";
//This part is Not Working_______________
upload.onchange="document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])";
//________________________________________
container.appendChild(img);
container.appendChild(upload);
container.appendChild(document.createElement("br"));
}
}
</script>
<div id="container"/>
Problem :
Without the Container appendChild function the code works fine, you can see it in the first three lines of code.
解决方案 You have to run a function inside upload.onchange
. Something like this:
upload.onchange= function () {
document.getElementById(img.id).src = window.URL.createObjectURL(this.files[0])
}
Other way to do:
upload.addEventListener('change', function () {
document.getElementById(img.id).src =
window.URL.createObjectURL(this.files[0])
})
这篇关于JavaScript:onchange 函数导致错误/不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文