Кто-нибудь знает какие-либо хорошие примеры, которые сочетают jQueryUI:Sortable:display-grid с файловым API HTML5, чтобы показать одновременное удаление нескольких локальных изображений в браузере, и все они затем отображаются в сетке отображения?
Ссылка:
http://jqueryui.com/demos/sortable/#display-grid
http://html5demos.com/file-api
Как я могу прочитать локальный файл, когда пользователь нажимает кнопку с помощью HTML5 Файловый API ?
Создайте заполнитель для изображений:
<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);
}
}
}
);
И последнее, но не менее важное: напишите часть File 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/.
