###前提・実現したいこと
File APIを使った投稿画像のプレビューの実装をしたい。
画像はメイン画像が1つサブ画像が3つ計4つ投稿できる実装です。
###発生している問題・エラーメッセージ
いろいろなサイトを参考にして実装したのですが、うまくいきません。
Uncaught TypeError: Cannot set property 'src' of null
上記のようなエラーが出てしまいます。何が原因でしょうか、、、
教えていただけると嬉しいです。
###該当のソースコード
javascript
1window.addEventListener('load', function(){ 2 for (num = 1; num<5; num++){ 3 document.getElementById("file"+String(num)).addEventListener('change',function(){ 4 var fileList = this.files; 5 var i = 0; 6 var fileReader = new FileReader(); 7 fileReader.onload = function(){ 8 var dataUrl = this.result; 9 document.getElementById("js-pre-image"+String(num)).src = dataUrl 10 } 11 fileReader.readAsDataURL(fileList[i]); 12 }); 13 } 14});
上記のようにっ実装しています。
###試したこと
ちなみに
javascript
1window.addEventListener('load', function(){ 2 document.getElementById("file1").addEventListener('change',function(){ 3 var fileList = this.files; 4 var i = 0; 5 var fileReader = new FileReader(); 6 fileReader.onload = function(){ 7 var dataUrl = this.result; 8 document.getElementById("js-pre-image1").src = dataUrl 9 } 10 fileReader.readAsDataURL(fileList[i]); 11 }); 12 document.getElementById("file2").addEventListener('change',function(){ 13 var fileList = this.files; 14 var i = 0; 15 var fileReader = new FileReader(); 16 fileReader.onload = function(){ 17 var dataUrl = this.result; 18 document.getElementById("js-pre-image2").src = dataUrl 19 } 20 fileReader.readAsDataURL(fileList[i]); 21 }); 22 document.getElementById("file3").addEventListener('change',function(){ 23 var fileList = this.files; 24 var i = 0; 25 var fileReader = new FileReader(); 26 fileReader.onload = function(){ 27 var dataUrl = this.result; 28 document.getElementById("js-pre-image3").src = dataUrl 29 } 30 fileReader.readAsDataURL(fileList[i]); 31 }); 32 document.getElementById("file4").addEventListener('change',function(){ 33 var fileList = this.files; 34 var i = 0; 35 var fileReader = new FileReader(); 36 fileReader.onload = function(){ 37 var dataUrl = this.result; 38 document.getElementById("js-pre-image4").src = dataUrl 39 } 40 fileReader.readAsDataURL(fileList[i]); 41 }); 42});
上記のように実装すると思うように動いたので、for文で繰り返せばいいのかなと考えました。
全くの初心者なので是非教えていただくと嬉しいです。
宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/25 01:44