Cara Menggunakan Fail HTML5 Seret dan Drop

Penjelasan terperinci mengenai html5 seret dan drop fail muat naik: pemprosesan fail klien dan muat naik pelayan asynchronous

mata teras

HTML5 menyokong menyeret dan menjatuhkan fail pada elemen laman web, dan menganalisis fail drag-and-drop dalam JavaScript, memunggah dan menghuraikan fail pada klien, memuat naik fail secara tidak sengaja ke pelayan menggunakan XMLHTTPREQUEST2, dan memaparkan kemajuan semasa .
Sokongan penyemak imbas mungkin tidak sekata kerana penggunaan teknologi HTML5 terkini. Versi semasa Firefox dan Chrome menyokong semua ciri, manakala Opera, IE dan sokongan safari adalah terhad atau tidak disokong sama sekali.
Untuk mengaktifkan seret dan drop fail, peristiwa JavaScript mesti dilampirkan pada elemen input fail dan elemen #FileDrag. Unsur #FileDrag juga harus dipaparkan dan butang penyerahan borang harus disembunyikan.
API fail W3C menyediakan beberapa objek untuk operasi fail, termasuk filelist, fail, dan fileReader, yang membolehkan array yang mewakili fail terpilih, fail individu, dan untuk membaca data fail pada klien dan menggunakannya dalam JavaScript, masing -masing.

seret dan drop fail desktop ke dalam penyemak imbas adalah salah satu matlamat utama integrasi aplikasi web. Ini adalah bahagian pertama dari siri artikel empat bahagian, yang memperkenalkan cara: 1. Dayakan seretan dan drop fail pada unsur-unsur web; 4. .

Cabaran Keserasian Pelayar

Sebelum memulakan, tutorial ini melibatkan beberapa teknologi HTML5 terkini, jadi sokongan dijangka tidak sekata. Kod ini berfungsi sekarang, tetapi API boleh berubah dan penyemak imbas terus berkembang. - Versi terbaru Firefox dan Chrome menyokong semua ciri dan berjalan dengan sempurna. - Opera boleh menghuraikan fail dalam JavaScript, tetapi tidak melaksanakan seretan dan drop fail dan muat naik XMLHTTPREQUEST2. - Versi desktop IE dan Safari tidak menyokong API. - Apple telah melumpuhkan borang memuat naik fail HTML pada versi iPhone dan iPad Safari.

Adakah ada yang tahu mengapa?

Akhirnya, sila ambil perhatian bahawa kod saya menunjukkan konsep asas. Terdapat sedikit pemeriksaan ralat dan anda perlu menyesuaikan diri dengan sistem pengeluaran anda.

html dan css

Ini adalah bentuk standard dengan jenis input fail. Satu -satunya ciri HTML5 ialah harta "berganda", yang membolehkan pengguna memilih bilangan fail. Kami memuat naik fail ke pelayan yang menjalankan PHP, tetapi kod itu hampir sama tidak kira apa teknologi yang anda gunakan. Nilai max_file_size tersembunyi menentukan 300,000 bait - PHP menggunakan nilai ini, tetapi kami juga menyemaknya pada klien untuk mengelakkan memuat naik fail besar.

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

elemen failrag akan digunakan sebagai lokasi seret dan drop fail kami. Unsur ini tersembunyi di CSS, tetapi jika seret dan drop disokong, ia akan didayakan dalam JavaScript:

#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

kami juga menentukan kelas .menghilkan gaya yang mengubah gaya apabila pengguna menyeret fail ke elemen. Penyemak imbas tidak akan memohon: gaya hover dalam kes ini, tetapi apabila peristiwa berlaku, kita boleh menambah kelas menggunakan JavaScript.

file api

W3C File API menyediakan beberapa objek. Kami akan menggunakan:- FileList: Arahan yang mewakili fail yang dipilih. - Fail: Mewakili satu fail. - FileReader: Antara muka yang membolehkan kami membaca data fail pada klien dan menggunakannya dalam JavaScript.

Acara JavaScript yang dilampirkan

Sudah tiba masanya untuk mula menggunakan beberapa JavaScript. Kami tidak menggunakan perpustakaan JavaScript, jadi untuk menyimpan jari menaip kami, kami akan membuat beberapa fungsi penolong untuk mengembalikan elemen dengan mesej status ID dan output:

// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

// 输出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

Kami sekarang akan memeriksa sama ada API fail tersedia dan hubungi fungsi init ():

// 调用初始化文件
if (window.File && window.FileList && window.FileReader) {
    Init();
}

// 初始化
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    // 文件选择
    fileselect.addEventListener("change", FileSelectHandler, false);

    // XHR2是否可用？
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {

        // 文件拖放
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        // 移除提交按钮
        submitbutton.style.display = "none";
    }

}

init () Fungsi: 1. Tetapkan pendengar acara "perubahan" untuk elemen input fail. 2. Tunjukkan unsur #filedrag. 3. Tetapkan pendengar acara "Dragover" dan "Dragleave" untuk mengubah gaya unsur #filedrag. 4. Tetapkan pendengar acara "drop" untuk elemen #FileDrag. 5. Sembunyikan butang Penyerahan Borang - Oleh kerana kami akan menganalisis dan memuat naik fail yang dipilih, ia tidak diperlukan.

Anda boleh memilih untuk menyembunyikan elemen input fail apabila menyokong seret dan drop fail. Secara peribadi, saya lebih suka menawarkan kedua -dua pilihan sebagai seret dan drop membawa beberapa isu kebolehgunaan. Pemeriksaan kaedah xmlhttprequest.upload boleh menghalang masalah dalam opera. Penyemak imbas menyokong fail, filelist, dan filereader, tetapi tidak menyokong acara seret dan drop atau XMLHTTPREQUEST2. Jadi ia boleh memaparkan maklumat fail, tetapi kami tidak mahu memaparkan elemen #FileDrag atau mengeluarkan butang hantar.

Fail Drag dan Drop Style Change

Sesetengah orang telah mengalami seretan fail dan lepaskan penyemak imbas web mereka. Malah, pengguna web yang berpengalaman mungkin berfikir ini adalah mustahil. Jadi kami menggunakan elemen yang mengisytiharkan "seret dan lepaskan fail di sini". Kami juga ingin menunjukkan kapan untuk menyeret dan menjatuhkan fail ke lokasi #FileDrag dengan menukar gayanya:

// 文件拖放悬停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

menganalisis fail drag-and-drop atau fail yang dipilih

Sama ada menggunakan "Semak imbas" untuk memilih satu atau lebih fail atau seret dan jatuhkan fail ke lokasi #FileDrag, kami menggunakan fungsi FileSelectHandler () yang sama:

// 文件选择
function FileSelectHandler(e) {

    // 取消事件和悬停样式
    FileDragHover(e);

    // 获取FileList对象
    var files = e.target.files || e.dataTransfer.files;

    // 处理所有File对象
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

Fungsi ini: 1. Ini penting, jika tidak, penyemak imbas boleh cuba memaparkan fail. 2. Dapatkan objek filelist. Ini akan datang dari kotak input fail (e.target.files) atau elemen #filedrag (e.datatransfer.files). 3. Akhirnya, fungsi gelung melalui semua objek fail dalam filelist dan melepasi mereka sebagai parameter ke fungsi parsefile () ...

<fieldset><legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div>

Fungsi ini menggunakan tiga atribut baca sahaja yang disediakan oleh objek fail ke maklumat output: -.name: Nama fail (tidak termasuk maklumat laluan) -Type: jenis mime, seperti imej/jpeg, teks/plain, dll, dll, dll, dll, dll, dll, dll, dll . -Size: saiz fail (dalam bait).

Sila lihat halaman demo di Firefox, Chrome, atau Opera (tiada sokongan seret dan drop). Anda juga boleh memuat turun fail untuk memeriksa kod tersebut. Kami telah banyak menutupi. Dalam jawatan saya yang seterusnya, kami akan belajar tentang cara menggunakan html5 dan javascript untuk membuka fail drag-and-drop ... artikel ini juga telah diterjemahkan ke dalam Armenia Baca artikel ini dan anda akan suka belajar; Ahli-ahli dengan serta-merta boleh mengakses semua e-buku SitePoint dan kursus dalam talian interaktif, seperti dunia sebenar HTML5 dan CSS3. Komen dalam artikel ini telah ditutup. Adakah anda mempunyai soalan mengenai HTML5? Mengapa tidak mengemukakan soalan di forum kami? FAQs Mengenai Fail Html5 Drag and Drop *

(bahagian FAQ berikut telah ditinggalkan kerana panjang artikel. Jika perlu, anda boleh meminta terjemahan bahagian FAQ secara berasingan.)

Atas ialah kandungan terperinci Cara Menggunakan Fail HTML5 Seret dan Drop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!