JavaScript：onchange 函数导致错误/不起作用答案

【问题标题】：JavaScript : onchange function causes error/ didn't workJavaScript：onchange 函数导致错误/不起作用
【发布时间】：2019-11-28 16:10:47
【问题描述】：

以下代码将添加文件上传和预览字段。


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

问题：

没有 Container appendChild 函数代码可以正常工作，您可以在前三行代码中看到它。

【问题讨论】：

标签： javascript html

【解决方案1】：

你必须在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])
})

【讨论】：

但它并不适用于所有字段仅适用于最后一个字段。

【解决方案2】：

问题已解决

工作正常。

所有图片字段都可以实现'n'个字段的上传预览功能。

<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";
                upload.id="upload "+i;
//Working_______________
                upload.onchange=upload.onchange= function () {

                    var img_id=this.getAttribute('id');
                    var imgId = img_id.charAt(7) ; 
                     document.getElementById("img "+imgId).src = window.URL.createObjectURL(this.files[0])
                      }

//________________________________________
                container.appendChild(img);
                container.appendChild(upload);
                container.appendChild(document.createElement("br"));
            }
        }
</script>
    <div id="container"/>

【讨论】：