読者です 読者をやめる 読者になる 読者になる

画像アップロード jquery.canvasResize.jsを使用してファイルを選択した時点でリサイズしてページに表示

ファイル選択時に選択した画像をページに表示

まずはココから、canvasResize.jsをダウンロード
その中に以下のファイルがあるのでこれらを使います。またjqueryも使います
binaryajax.js
exif.js
canvasResize.js

<script src="jquery.js"></script>
<script src="binaryajax.js"></script>
<script src="exif.js"></script>
<script src="canvasResize.js"></script>

<div id="image" style="width:180px; height:180px; background-repeat: no-repeat;">ここに画像が表示されるよ</div>
<input type="file" id="upload" />

<script>
$("#upload").change(function(event){
  var file = event.target.files[0];
  $.canvasResize(file, {
    width: 200,
    height: 200,
    crop: false,
    quality: 80,
    callback: function(data) {
      $("#image").css({
        'background-image':'url(' + data + ')'
      });
    }
  });
});
</script>




ここに画像が表示されるよ

リンク集へ