使脚本可重复使用,即不保持重复吗?

问题描述 投票:0回答:1

在js中有更好的方法吗?或者更多,我将如何在js中做得更好?所以我基本上没有3个脚本。

谢谢您的任何帮助

<label for="img1">Image 1:</label>
<input type="file" id="img1" name="img1" />
<img id="image1"/>
<script>
    document.getElementById("img1").onchange = function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById("image1").src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
</script>

<label for="img2" >Image 2:</label>
<input type="file" id="img2" name="img2" />
<img id="image2"/>
<script>
    document.getElementById("img2").onchange = function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById("image2").src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
</script>

<label for="img3">Image 3:</label>
<input type="file" id="img3" name="img3" />
<img id="image3"/>
<script>
    document.getElementById("img3").onchange = function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById("image3").src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
</script>

试图更好地解释自己。例如在python中,遍历某些内容并在函数中使用i。

gg = ("a", "q", "f", "4", "f", "h")
for i in range(len(gg)):
    print ('thing'+str(i))

javascript html
1个回答
1
投票
<label for="img1">Image 1:</label>
<input type="file" id="img1" name="img1" />
<img id="image1"/>
<label for="main_img">Image 2:</label>
<input type="file" id="img2" name="img2" />
<img id="image2"/>
<label for="main_img">Image 3:</label>
<input type="file" id="img3" name="img3" />
<img id="image3"/>
<script>
imgOnChange('img1','image1');
imgOnChange('img2','image2');
imgOnChange('img3','image3');
function imgOnChange(imgId, imageId) {
    document.getElementById(imgId).onchange = function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById(imageId).src = e.target.result;
        };
        reader.readAsDataURL(this.files[0]);
    };
}
</script>
© www.soinside.com 2019 - 2024. All rights reserved.