会員制Webサイトやストレージサービスなどで
input入力フォームでファイルをアップロードさせる[type=file]を使用する際、
選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので
File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験
まずは動作サンプルから。
「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示
サンプル画面上にある入力フィールドinputにて画像を選択させた場合、
入力フィールド下に選択した画像が表示されます。
全体構成についてまずはHTMLから。
◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="imgInput"> <input type="file" name="file2"> </div><!--/.imgInput--> <div class="imgInput"> <input type="file" name="file3"> </div><!--/.imgInput-->
input[type=file]タグを任意のブロック要素で囲って構成しています。
（ブロック要素で囲う必要がない場合もあると思いますが今回はこの構成で…）
今回のサンプルはCSSに関しては
特に特別なことはしていないので内容について割愛します。
そして実際の動作スクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var setFileInput = $('.imgInput');
setFileInput.each(function(){
var selfFile = $(this),
selfInput = $(this).find('input[type=file]');
selfInput.change(function(){
var file = $(this).prop('files')[0],
fileRdr = new FileReader(),
selfImg = selfFile.find('.imgView');
if(!this.files.length){
if(0 < selfImg.size()){
selfImg.remove();
return;
}
} else {
if(file.type.match('image.*')){
if(!(0 < selfImg.size())){
selfFile.append('<img alt="" class="imgView">');
}
var prevElm = selfFile.find('.imgView');
fileRdr.onload = function() {
prevElm.attr('src', fileRdr.result);
}
fileRdr.readAsDataURL(file);
} else {
if(0 < selfImg.size()){
selfImg.remove();
return;
}
}
}
});
});
});
</script>
スクリプト開始部分にある変数「setInput」にて
対象とするブロック要素名を指定します。
選択された画像に対してのパスを抜き取って
＜img＞タグを生成してsrc属性の中にパスを入れこんでいます。
サンプルでは選択した画像がオリジナルサイズで表示されますが
実際は画面のレイアウトに合わせて
CSSで＜img＞タグに対して「max-width」を設定しておくと良いかと思います。
File APIを使用していますが
このFile API自体がIE10からでないと対応していないので
IE9以前のIEブラウザでは表示されません。
次に入力前に仮の画像を敷いておいて
選択された際に画像を差し替える方法について。
※サンプルでは「NO IMAGE」としています。
入力前に仮の画像を敷いておいて選択された際に画像を差し替える方法
まずは動作サンプルから。
「「NO IMAGE」画像を敷いておいて選択された際に画像を差し替える方法」サンプルを別枠で表示
入力前は仮の「NO IMAGE」画像を設置しておき
input[type=file]から画像が選択された際に
「NO IMAGE」画像が切り替わります。
全体構成についてまずはHTMLから。
◆HTML <div class="imgInput"> <input type="file" name="file1"> <img src="img/noimage.png" alt="" class="imgView"> </div><!--/.imgInput--> <div class="imgInput"> <input type="file" name="file2"> <img src="img/noimage.png" alt="" class="imgView"> </div><!--/.imgInput--> <div class="imgInput"> <input type="file" name="file3"> <img src="img/noimage.png" alt="" class="imgView"> </div><!--/.imgInput-->
最初のサンプル同様に
input[type=file]タグを任意のブロック要素で囲い
それぞれ「NO IMAGE」用の画像を＜img＞タグで設置し任意のclassをつけておきます。
そして実際の動作スクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var setFileInput = $('.imgInput'),
setFileImg = $('.imgView');
setFileInput.each(function(){
var selfFile = $(this),
selfInput = $(this).find('input[type=file]'),
prevElm = selfFile.find(setFileImg),
orgPass = prevElm.attr('src');
selfInput.change(function(){
var file = $(this).prop('files')[0],
fileRdr = new FileReader();
if (!this.files.length){
prevElm.attr('src', orgPass);
return;
} else {
if (!file.type.match('image.*')){
prevElm.attr('src', orgPass);
return;
} else {
fileRdr.onload = function() {
prevElm.attr('src', fileRdr.result);
}
fileRdr.readAsDataURL(file);
}
}
});
});
});
</script>
スクリプト開始部分にある変数「setInput」にて対象とするブロック要素名を指定し、
「setImg」にて切り替え対象とする＜img＞タグのクラス名を指定します。
最初のサンプル同様に
選択された画像に対してのパスを抜き取って
「setImg」で指定した画像ファイルのパスを書き換えています。
ブラウザによっては画像を再選択しようとしてダイヤログを開き
キャンセルボタンを押すと選択されていた画像が空の状態になりますが
その際にも「NO IMAGE」の画像に戻るようになっています。
以上が、INPUT[type=file]で選択された画像のプレビューを表示させる実験でした。
通常のWebサイト制作ではあまり使う機会はないと思いますが
画像アップロードが必要なストレージサービスの構築の際など
プレビューを表示させることでユーザーにも優しいUIになるのではないかと思っております。
今回の参考記事。
【参考記事】アップロード時に選択した画像のサムネイルを表示 | 私的雑録
INPUT[type=file]で画像ファイルのプレビューを表示させる際にぜひ。。。