<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Example</title>
</head>
<body>
<img id="picture">
<form>
<input type="file" name="image" accept="image/jpeg,image/png">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.0/holder.js"></script>
<script>
$(function(){
$('input[name="image"]').on('change', function(e){
// multiple指定はしてないので1個だけ入ってくるはず
var f = e.target.files[0];
console.log(f);
if (f.type.match('image.*')){
// Reader生成
var reader = new FileReader();
// Readerのロード完了時のハンドラ
reader.onload = (function(){
// この時点でreader.resultにはファイルがdataURL化された文字列が入る
$('img#picture').attr('src', reader.result);
});
// dataURL形式で読み込み
reader.readAsDataURL(f);
}
});
});
</script>
</body>
</html>
More than 5 years have passed since last update.
フォームで選択された画像をその場でプレビュー
Last updated at Posted at 2013-10-27
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme
List of users who liked
1011