사진 편집 앱이 있고 사용자가 수백 장의 사진을 드래그하여 앱으로 복사할 수 있도록 하려는 경우, 어떻게 해야 할까요?
최근 게시물에서 키타무라 에이지는 드래그 앤 드롭 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 탐색을 참조하세요.