画像をアップロードするあれこれ。。
画像をアップロードするのに、どなんな感じでされています？
onchangeして、jqueryを呼び出してウゴウゴするのは一緒なんですが、記述方法が色々あります。。。あるはずです(^^;
今回開発している中で、あれなんか違うよねぇなんて思いながら書いてみてから、以前書いたのを見返してみたら・・・あは(^^;
ってなことで、メモも兼ねてアップしてみました。
パターンその１
・html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action="/user/upload" method="post" enctype="multipart/form-data"> <div class="form-group form-inline"> <p class="col-md-3 text-md-right text-bold">ファイル名<span class="text-red">(※)</span></p> <input type="file" id="target" name="target" accept=".png,.jpg"> </div> <div id="preview"></div> <br /> <button class="btn btn-primary btn-flat" type="submit"> 更新 </button> <a href="javascript:history.back();"> <button class="btn btn-warning btn-flat" type="button"> キャンセル </button> </a> </form> |
・Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(function(){ $('#target').change( function(){ $('img').remove(); var file = $(this).prop('files')[0]; var fileReader = new FileReader(); fileReader.onloadend = function() { $('#preview').html('<img src="' + fileReader.result + '"/>'); $('img').addClass('resize-image'); } fileReader.readAsDataURL( file ); }); }); </script> |
パターン２
・html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form action="/usr/upload" method="post" name="form1" enctype="multipart/form-data"> <div class="form-group form-inline"> <p class="col-md-2 text-md-right text-bold">画像</p> <input type="file" id="target" name="target" accept=".jpg, .png"> </div> <div class="form-group form-inline"> <p class="col-md-2 text-md-right text-bold"> </p> <img id="preview" style="width:50vh;" /> </div> <button class="btn btn-primary btn-flat" type="submit"> 追加 </button> <a href="javascript:history.back();"> <button class="btn btn-warning btn-flat" type="button"> キャンセル </button> </a> </form> |
・javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#target').on( 'change', function(e){ var file = e.target.files[0]; var reader = new FileReader(); // 画像でない場合は処理を終了する if( file.type.indexOf("image") < 0 ) { alert("画像ファイルを指定してください"); return false; } reader.onload = ( function( file ){ return function(e){ $("#preview").attr( "src", e.target.result ); $('#preview').attr( "title", file.name ); }; })(file); reader.readAsDataURL( file ); }); |
