Download: スクリプトのダウンロード

※呼び出す HTML と JavaScript のソースの書き方は、それぞれの表示形式のサンプルをご覧ください。

before : プレビュー画像を前に挿入

画像を選択（複数選択可）

Note 解説

「画像を前に挿入」は、ファイル選択要素（<input type="file">）の前にプレビュー画像を挿入します。

  • 設定の "position" に "0" を指定した場合、この形式になります。（既定）
    ※"2" を指定した場合は、兄弟要素の一番前に追加していきます。
  • 設定の "imgbreak" に "true" を指定すると、同時に改行（<br>）も挿入されます。
  • ファイル選択要素を <label> で囲むと、プレビュー画像をクリックしたときに、ファイル選択要素を再度押したような振る舞いをします。

JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。

JavaScript ソース

<script src="jquery.js"></script>
<script src="jquery.upload_thumbs.js"></script>

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('form input:file').uploadThumbs({
        position : 0,      // 0:before, 1:after, 2:parent.prepend, 3:parent.append,
                           // any: arbitrarily jquery selector
        imgbreak : true    // append <br> after thumbnail images
    });
});
</script>

HTML ソース（入力前）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <label>
                <input type="file" name="images[]" multiple="multiple" />
            </label>
        </li>
        <li>
            <label>
                <input type="file" name="images[]" multiple="multiple" />
            </label>
        </li>
    </ul>
</form>

HTML ソース（入力後）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <label>
                <img src="data:image/jpeg;base64,/..." class="thumb"
                     alt="ファイル名" title="ファイル名 (ファイルサイズ)" /><br />
                <input type="file" name="images[]" multiple="multiple" />
            </label>
        </li>
        <li>
            <label>
                <input type="file" name="images[]" multiple="multiple" />
            </label>
        </li>
    </ul>
</form>

CSS ソース

<style>
form img.thumb {
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
</style>

after : プレビュー画像を後に挿入

画像を選択（複数選択可）

Note 解説

「画像を後に挿入」は、ファイル選択要素（<input type="file">）の後にプレビュー画像を挿入します。

  • 設定の "position" に "1" を指定した場合、この形式になります。
    ※"3" を指定した場合は、兄弟要素の一番後に追加していきます。
  • 設定の "imgbreak" に "false" を指定すると、改行（<br>）は挿入されません。
  • ファイル選択要素を <label> で囲まなければ、プレビュー画像をクリックしても何も起きません。

JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。

JavaScript ソース

<script src="jquery.js"></script>
<script src="jquery.upload_thumbs.js"></script>

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('form input:file').uploadThumbs({
        position : 1,      // 0:before, 1:after, 2:parent.prepend, 3:parent.append,
                           // any: arbitrarily jquery selector
        imgbreak : false   // append <br> after thumbnail images
    });
});
</script>

HTML ソース（入力前）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <input type="file" name="images[]" multiple="multiple" />
        </li>
        <li>
            <input type="file" name="images[]" multiple="multiple" />
        </li>
    </ul>
</form>

HTML ソース（入力後）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <input type="file" name="images[]" multiple="multiple" />
            <img src="data:image/jpeg;base64,/..." class="thumb"
                 alt="ファイル名1" title="ファイル名1 (ファイルサイズ1)" />
            <img src="data:image/jpeg;base64,/..." class="thumb"
                 alt="ファイル名2" title="ファイル名2 (ファイルサイズ2)" />
        </li>
        <li>
            <input type="file" name="images[]" multiple="multiple" />
        </li>
    </ul>
</form>

CSS ソース

<style>
form img.thumb {
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
</style>

arbitrarily : プレビュー画像を任意の場所に挿入

画像を選択（複数選択可）
プレビュー

Note 解説

「画像を任意の場所に挿入」は、"position" で指定した要素にプレビュー画像を挿入します。

  • 設定の "position" に 数字以外 を指定した場合、この形式になります。
    ※jQuery のセレクタの形式で指定します。
  • ただし、プレビュー画像を挿入する要素が固定されてしまうので、対応するファイル選択要素（<input type="file">）は一つしか設置することができません。
    ※複数設置する場合は、複数の呼び出しスクリプトを書きます。

JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。

JavaScript ソース

<script src="jquery.js"></script>
<script src="jquery.upload_thumbs.js"></script>

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('#upload1').uploadThumbs({
        position : '#preview1',   // any: arbitrarily jquery selector
    });
    $('#upload2').uploadThumbs({
        position : '#preview2',   // any: arbitrarily jquery selector
    });
});
</script>

HTML ソース（入力前）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <input type="file" id="upload1" name="images[]" multiple="multiple" />
        </li>
        <li>
            <input type="file" id="upload2" name="images[]" multiple="multiple" />
        </li>
    </ul>
	<p id="preview1"></p>
	<p id="preview2"></p>
</form>

HTML ソース（入力後）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <input type="file" id="upload1" name="images[]" multiple="multiple" />
        </li>
         <li>
            <input type="file" id="upload2" name="images[]" multiple="multiple" />
        </li>
    </ul>
	<p id="preview1">
        <img src="data:image/jpeg;base64,/..." class="thumb"
             alt="ファイル名1" title="ファイル名1 (ファイルサイズ1)" />
        <img src="data:image/jpeg;base64,/..." class="thumb"
             alt="ファイル名2" title="ファイル名2 (ファイルサイズ2)" />
	</p>
	<p id="preview2"></p>
</form>

CSS ソース

<style>
form img.thumb {
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
</style>

exclusion : 画像の差し替え（排他制御）

画像を選択

Note 解説

Webアプリケーションでは、既にアップロードされてデータベース等に登録されている画像を、新しい画像に差し替えたい、または削除したいというときがあります。
「画像の差し替え」では、チェックボックスを利用して、現在登録されている画像を保持するか、新しい画像や削除したいのかを、画像のプレビューで表現することができます。

  • 特に特別な設定をする必要はありません。
  • チェックボックスにチェックがついていると、現在の画像のみ表示します。
  • チェックボックスのチェックを外すと、現在の画像は非表示になります。
  • ファイル選択要素（<input type="file">）から新しい画像を選択すると、その画像のプレビューが表示され、現在の画像は非表示になります。それに伴い、チェックボックスのチェックが外れます。
  • PHP などのプログラムでは、このチェックボックスの ON/OFF、および新しい画像の有無で、画像の適用を判断することができます。

JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。

JavaScript ソース

<script src="jquery.js"></script>
<script src="jquery.upload_thumbs.js"></script>

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('form input:file').uploadThumbs();
});
</script>

HTML ソース（入力前）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <label>
                <input type="checkbox" name="checked" value="1" checked="checked" />
                <small>現在の画像を使用</small><br />
            </label>
            <label>
                <img src="example.jpg" class="uploaded thumb" alt="" /><br />
                <input type="file" name="images" />
            </label>
        </li>
        <li>
            <!-- <label> を書かない場合 -->
            <input type="checkbox" name="checked" value="1" checked="checked" />
            <small>現在の画像を使用</small><br />
            <img src="example2.jpg" class="uploaded thumb" alt="" /><br />
            <input type="file" name="images" />
        </li>
    </ul>
</form>

HTML ソース（入力後）

<form action="#" method="post" enctype="multipart/form-data">
    <ul>
        <li>
            <label>
                <input type="checkbox" name="checked" value="1" ... />
                <small>現在の画像を使用</small><br />
            </label>
            <label>
                <img src="example.jpg" class="uploaded thumb" style="display:none;" alt="" /><br />
                <img src="data:image/jpeg;base64,/..." class="thumb"
                     alt="ファイル名" title="ファイル名 (ファイルサイズ)" /><br />
                <input type="file" name="images" />
            </label>
        </li>
        <li>
            <!-- <label> を書かない場合 -->
            <input type="checkbox" name="checked" value="1" ... />
            <small>現在の画像を使用</small><br />
            <img src="example2.jpg" class="uploaded thumb" style="display:none;" alt="" /><br />
            <input type="file" name="images" />
        </li>
    </ul>
</form>

CSS ソース

<style>
form img.thumb {
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
</style>

image button : ファイル選択ボタンを画像にする（おまけ）

画像を選択（複数選択可）

Note 解説

Webページのデザイン的に、ファイル選択ボタンをブラウザ標準のものではなく、任意の画像にしたい場合があります。

モダンブラウザでは <label> 要素を使うことでファイルの選択は簡単に実現できますが、ファイル選択要素を非表示にしてしまうと、そのままでは何のファイルを選択したのかわからなくなってしまいます。

このプラグインのように、画像プレビューを使うと「選択されている画像」がわかるため、取り扱いが楽になります。
また、「選択したファイル名」を表示することもできます。

  • 選択したファイル名を表示したい場合は、設定の "alternate" に、選択したファイル名を挿入する jQuery セレクタ を設定します。（既定は "alt"）
  • サンプルとCSS例では IE8以下 でも動作するように、ファイル選択要素（<input type="file">）を透明化してボタンの上に乗せています。

JavaScriptとHTMLの各ソースは上のタブを操作してご覧ください。

JavaScript ソース

<script src="jquery.js"></script>
<script src="jquery.upload_thumbs.js"></script>

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('form input:file').uploadThumbs({
        position  : '#preview',    // any: arbitrarily jquery selector
        alternate : '.alt'         // selecter for alternate view input file names
    });
});
</script>

HTML ソース（入力前）

<form action="#" method="post" enctype="multipart/form-data">
    <p id="preview"></p>
    <p class="upload">
        <label>
            <input type="file" name="images[]" multiple="multiple" accept="image/*"
                title="画像をアップロードする" />
            <img src="../img/button.png" class="button" alt="" />
        </label>
        <input type="text" class="alt" />
    </p>
</form>

HTML ソース（入力後）

<form action="#" method="post" enctype="multipart/form-data">
    <p id="preview">
        <img src="data:image/jpeg;base64,/..." class="thumb"
             alt="ファイル名1" title="ファイル名1 (ファイルサイズ1)" />
        <img src="data:image/jpeg;base64,/..." class="thumb"
             alt="ファイル名2" title="ファイル名2 (ファイルサイズ2)" />
    </p>
    <p class="upload">
        <label>
            <input type="file" name="images[]" multiple="multiple" accept="image/*"
                title="画像をアップロードする" />
            <img src="../img/button.png" class="button" alt="" />
        </label>
        <input type="text" class="alt" value="ファイル名1, ファイル名2" />
    </p>
</form>

CSS ソース

<style>
form img.thumb {
    margin:0 5px 5px 0;
    max-width:160px;
    vertical-align:bottom;
}
form .upload label {
    display:inline-block; position:relative;
    overflow:hidden; vertical-align:middle; }
form .upload label input[type="file"] {
    position:absolute; top:0; right:0; cursor:pointer;
    font-size:100px; opacity:0.01; -ms-filter:"alpha(opacity=1)"; }
form .upload label input[type="file"]:hover + .button {}
form .upload .alt  {
    padding:4px; border:1px solid #999; vertical-align:middle; }
</style>