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))
<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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加