사진 편집 앱이 있고 사용자가 수백 장의 사진을 드래그하여 앱으로 복사할 수 있도록 하려는 경우, 어떻게 해야 할까요?
최근 게시물에서 키타무라 에이지는 드래그 앤 드롭 API의 미묘하지만 강력한 새 기능, 즉 폴더를 드래그하여 HTML5 Filesystem API FileEntry 및 DirectoryEntry 객체로 가져오는 기능 (DataTransferItem의 새 메서드에 액세스하여 수행됨) .webkitGetAsEntry()에 대해 강조했습니다.
.webkitGetAsEntry() 확장 프로그램의 멋진 점은 파일과 전체 폴더를 가져오는 세련미입니다. 드롭 이벤트에서 FileEntry 또는 DirectoryEntry를 가져왔다면 Filesystem API의 copyTo()를 사용하여 앱에 가져와야 합니다.
다음은 여러 개의 드롭된 폴더를 파일 시스템에 복사하는 예입니다.
var fs = null; // Cache filesystem for later.
// Not shown: setup drag and drop event listeners.
function onDrop(e) {
e.preventDefault();
e.stopPropagation();
var items = e.dataTransfer.items;
for (var i = 0, item; item = items[i]; ++i) {
var entry = item.webkitGetAsEntry();
// Folder? Copy the DirectoryEntry over to our local filesystem.
if (entry.isDirectory) {
entry.copyTo(fs.root, null, function(copiedEntry) {
// ...
}, onError);
}
}
}
window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
fs = fileSystem;
}, function(e) {
console.log('Error', e);
});
아주 좋습니다. 다시 말하면, DnD를 Filesystem API 호출과 통합하기 때문에 간편해집니다.
한 단계 더 나아가 폴더 또는 파일을 일반 <input type="file">로 드래그 앤 드롭한 다음 파일 시스템 디렉터리 또는 파일 항목으로 항목에 액세스할 수도 있습니다. .webkitEntries를 통해 가능합니다.
<input type="file" multiple>
function onChange(e) {
e.stopPropagation();
e.preventDefault();
var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.
[].forEach.call(entries, function(entry) {
// Copy the entry into our local filesystem.
entry.copyTo(fs.root, null, function(copiedEntry) {
...
}, onError);
});
}
document.querySelector('input[type="file"]').addEventListener('change', onChange);
파일/폴더를 가져오는 이러한 여러 기술을 보여 주기 위해 사진 갤러리 데모를 준비했습니다.
HTML5 파일 시스템 API에 대한 자세한 내용은 파일 시스템 API 탐색을 참조하세요.