این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ادغام ورودی[type=file] با Filesystem API

Eric Bidelman

فرض کنید یک برنامه ویرایش عکس دارید و دوست دارید کاربران بتوانند صدها عکس را بکشند و در برنامه شما کپی کنند. باشه چیکار میکنی

در یک پست اخیر ، ایجی کیتامورا یک ویژگی ظریف و در عین حال قدرتمند جدید در کشیدن و رها کردن API ها را برجسته کرد. توانایی کشیدن در پوشه ها و بازیابی آنها به عنوان HTML5 Filesystem API FileEntry و DirectoryEntry (با دسترسی به یک روش جدید در DataTransferItem ، .webkitGetAsEntry() انجام می شود).

نکته جالب در مورد پسوند .webkitGetAsEntry() این است که تا چه اندازه زیبایی وارد کردن فایل ها و کل پوشه ها می کند. هنگامی که یک FileEntry یا DirectoryEntry از یک رویداد drop دارید، باید از copyTo() Filesystem API برای وارد کردن آن به برنامه خود استفاده کنید.

نمونه ای از کپی کردن چندین پوشه حذف شده در فایل سیستم:

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);

من یک نسخه ی نمایشی گالری عکس را برای نشان دادن این تکنیک های مختلف برای وارد کردن فایل ها/پوشه ها گردآوری کرده ام.

نسخه ی نمایشی را راه اندازی کنید

برای کسب اطلاعات بیشتر در مورد API فایل سیستم HTML5، به کاوش در APIهای سیستم فایل مراجعه کنید.

Eric Bidelman

نمونه ای از کپی کردن چندین پوشه حذف شده در فایل سیستم:

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" 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);

نسخه ی نمایشی را راه اندازی کنید

برای کسب اطلاعات بیشتر در مورد API فایل سیستم HTML5، به کاوش در APIهای سیستم فایل مراجعه کنید.