画像をアップロードするイベントをトリガーにして、アップロードした画像と元からある画像を入れ替えるにはどしたら良いでしょうか?
下のようにやりましたが、アップロード後に元の画像とアップロードした画像が入れ替わりません。
個人的にはjavascriptに問題があると思ってます。
原因がわからないので、ご教授お願いします。
html
1<!--初めからある画像を配置("IMG_2328.PNG")--> 2<canvas id="canvas" width="150" height="150"></canvas> 3 <img src="IMG_2328.PNG" id="original-img"> 4 </div> 5 6 <!-- アップロードボタン--> 7 <div class="field is-grouped"> 8 <div style="width: 500px"> 9 <form enctype="multipart/form-data" method="post"> 10 <input type="file" name="userfile" accept="image/*"> 11 </form> 12 </div>
javascript
1var file = null; // 選択されるファイル 2var blob = null; // 画像(BLOBデータ) 3 4 // ファイルが選択されたら 5$('input[type=file]').change(function() { 6 7 // ファイルを取得 8 file = $(this).prop('files')[0]; 9 // 選択されたファイルが画像かどうか判定 10 if (file.type != 'image/jpeg' && file.type != 'image/png') { 11 file = null; 12 blob = null; 13 return; 14 } else { 15 file.width=150; 16 file.height=150; 17 document.ElementById('original-img').src=file; 18 } 19});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/06 06:15
2019/05/06 06:17