画像アップロード 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>
ここに画像が表示されるよ
