4

jQueryUI:Sortable:display-grid を HTML5 ファイル API と組み合わせて、複数のローカル画像を同時にブラウザーにドロップし、それらすべてを表示グリッドに表示する良い例を知っている人はいますか?

参照:
http://jqueryui.com/demos/sortable/#display-grid
http://html5demos.com/file-api
ユーザーが HTML5 ファイル API を使用してボタンを押したときにローカル ファイルを読み取るにはどうすればよいですか?

4

1 に答える 1

2

画像のプレースホルダーを作成します。

<ul id="sortable"></ul>

ソート可能をプレースホルダーにバインドします。

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();

ondrop 関数をプレースホルダーにバインドします。

$('#sortable').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer){
            if(e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                upload(e.originalEvent.dataTransfer.files);
            }   
        }
    }
);

最後になりましたが、ファイル API 部分を記述します。

function upload(files){
    for (var i = 0, f; f = files[i]; i++) {
        var imageReader = new FileReader();
        imageReader.onload = (function(aFile) {
            return function(e) {
                var li = document.createElement('li');
                li.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join('');
                $('#sortable').append(li);
         };
    })(f);
    imageReader.readAsDataURL(f);
}

動作中の完全なコードを参照してください: http://jsfiddle.net/xKYxL/2/

クレジット: https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_of_file_api_drag_drop_hard_drive_files_to_a_webpage28?lang=en

于 2012-07-06T21:33:00.697 に答える