Cara memuat naik fail secara asynchronous dengan menggunakan html5 dan ajax

mata teras

Memuat naik fail secara asynchronously menggunakan HTML5 dan AJAX boleh dilakukan di latar belakang, membolehkan pengguna melakukan tugas lain pada halaman semasa memuat naik. Proses ini melibatkan membuat borang HTML untuk memuat naik fail ke halaman PHP, dan JavaScript memastikan bahawa hanya imej JPG dengan kurang daripada 300,000 bait yang dimuat naik.
Fungsi muat naik JavaScript memerlukan objek XMLHTTPREQUEST2 (tersedia dalam Firefox dan Chrome). Kaedah .pen () xmlhttprequest ditetapkan untuk menyiarkan data ke halaman PHP, tetapkan header HTTP ke nama fail, dan lulus objek fail ke kaedah .send ().
Fail PHP memeriksa header HTTP X_FileName untuk membezakan antara permintaan AJAX dan pos borang standard. Jika nama fail ditetapkan, PHP akan mengambil data yang diterbitkan dan mengeluarkannya ke fail baru dalam folder "Uploads". Pos HTML Multipart/Form-Data Standard dikendalikan menggunakan fungsi Php $ _file biasa.

Dalam artikel sebelumnya, kami belajar cara menggunakan HTML5 untuk menyeret dan menjatuhkan fail dan bagaimana membuka fail menggunakan HTML5 dan JavaScript. Sekarang kami mempunyai set fail yang sah yang boleh memuat naik setiap fail ke pelayan. Proses ini berlaku secara asynchronously di latar belakang, jadi pengguna dapat menyelesaikan tugas lain pada halaman ketika proses berlangsung.

html

mari kita periksa borang HTML kami sekali lagi:

Kami memuat naik fail ke halaman php muatload.php. Apabila pengguna mengklik "Muat naik fail", halaman akan memproses permintaan muat naik AJAX dan pos borang standard. JavaScript kami akan memastikan bahawa hanya imej JPG yang dimuat naik dengan kurang daripada 300,000 bait (nilai yang ditentukan dalam max_file_size).

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

JavaScript

Pertama, kita perlu menambah garis ke fungsi FileSelectHandler () yang dipanggil apabila memilih atau menyeret dan menjatuhkan satu atau lebih fail. Dalam gelung fail kami, kami akan memanggil fungsi lain - UploadFile ():

Muat naik fail memerlukan objek XMLHTTPREQUEST2, yang kini boleh didapati di Firefox dan Chrome. Sebelum membuat panggilan AJAX, kami memastikan bahawa kaedah .upload () tersedia dan kami mempunyai JPG dengan saiz fail yang lebih kecil daripada nilai borang MAX_FILE_SIZE:

<code class="language-javascript">// 文件选择
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);
        UploadFile(f);
    }

}</code>

Kaedah. Di samping itu, kami menetapkan header HTTP ke nama fail dan lulus objek fail ke kaedah .send ().

<code class="language-javascript">// 上传JPEG文件
function UploadFile(file) {

    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.type == "image/jpeg" && file.size < $id("MAX_FILE_SIZE").value) {

        // 开始上传
        xhr.open("POST", $id("upload").action, true);
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.send(file);

    }

}</code>

php

fail php kami upload.php sekarang memeriksa header http X_FileName untuk membezakan antara permintaan Ajax dan post borang standard:

Jika nama fail ditetapkan, PHP boleh mendapatkan data yang diterbitkan dan mengeluarkannya ke fail baru dalam folder "Muat naik". Anehnya, ini dapat dicapai dengan satu baris kod:

<code class="language-php"><?php $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); ?></code>

Pos HTML Multipart/Form-Data Standard boleh dikendalikan menggunakan fungsi Php $ _file biasa:

<code class="language-php">if ($fn) {

    // AJAX调用
    file_put_contents(
        'uploads/' . $fn,
        file_get_contents('php://input')
    );
    echo "$fn 上传成功";
    exit();

}</code>

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div> <label for="fileselect">要上传的文件：</label> <div>或在此处拖放文件</div>
</div>
<div>上传文件</div>
</fieldset></code>

Anda boleh melihat halaman demo, tetapi ambil perhatian bahawa ia dihoskan pada pelayan tanpa sokongan PHP dan muat naik tidak berlaku. Jadi muat turun fail untuk menyemak kod dan pasangnya pada pelayan PHP anda sendiri.

Kod di atas berfungsi, tetapi pengguna tidak tahu sama ada muat naik fail telah bermula, selesai atau gagal. Anda perlu membaca isu terakhir siri ini: Cara Membuat Fail Muat naik Bar Progress di HTML5 dan JavaScript ...

Soalan Lazim (FAQ) Mengenai HTML5 AJAX Fail Upload

(bahagian FAQ ditinggalkan di sini kerana bahagian ini tidak ada kaitan dengan matlamat asal pseudo dan lebih lama. artikel.)

Atas ialah kandungan terperinci Cara memuat naik fail secara asynchronous dengan menggunakan html5 dan ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!