tetapan fail jquery

Dalam pembangunan web, kami selalunya perlu membenarkan pengguna memuat naik fail, dan pemalam Muat Naik Fail jQuery ialah alat yang sangat mudah dan praktikal yang membolehkan kami melaksanakan fungsi muat naik fail dengan mudah. Artikel ini akan memperkenalkan cara menggunakan pemalam Muat Naik Fail jQuery untuk menyediakan fungsi muat naik fail.

1. Import fail jQuery

Sebelum menggunakan pemalam Muat Naik Fail jQuery, kita perlu memperkenalkan fail jQuery terlebih dahulu untuk memastikan pemalam boleh berjalan dengan betul. Anda boleh memperkenalkan fail jQuery ke dalam dokumen HTML melalui kod berikut:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Muat turun dan perkenalkan pemalam Muat Naik Fail jQuery

Mula-mula muat turun kod sumber pemalam dari laman web rasmi, dan kemudian masukkan fail berikut ke dalam Dalam dokumen HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/css/jquery.fileupload.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/vendor/jquery.ui.widget.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/jquery.fileupload.min.js"></script>

3. Tetapan dokumen HTML

Tetapkan dokumen HTML dan buat borang muat naik fail, contohnya:

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <button type="submit">上传</button>
</form>

Nota: Borang ini mengandungi kotak Input jenis fail dan butang hantar.

4. Tetapan kod jQuery

Selepas tetapan di atas selesai, kami perlu menggunakan kod berkaitan jQuery untuk tetapan. Mula-mula, anda boleh memulakan pemalam melalui kod berikut:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            // 上传完成后的回调函数
        }
    });
});

Dalam kod ini, kami menentukan kaedah muat naik fail untuk bermula pada borang. Pilihan dataType memberitahu pemalam bahawa pelayan akan bertindak balas dengan data dalam format JSON, dan fungsi yang dilakukan ialah fungsi panggil balik selepas fail berjaya dimuat naik.

Perlu diingat bahawa kod di atas tidak mengehadkan jenis fail yang dimuat naik. Jika anda perlu mengehadkan jenis fail yang dimuat naik, anda boleh menambah pilihan berikut semasa memulakan kod:

$(function () {
    $('#fileupload').fileupload({
        // 允许上传的文件类型
        acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i,
        ...
    });
});

Terdapat pilihan lain yang biasa digunakan yang boleh ditetapkan, seperti:

$(function () {
    $('#fileupload').fileupload({
        // 允许上传的最大文件大小
        maxFileSize: 5000000, // 5 MB
        // 最大上传文件数量
        maxNumberOfFiles: 5,
        // 是否支持拖拽上传
        dropZone: $('#dropzone'),
        // 是否启用自动上传
        autoUpload: false,
        ...
    });
});

Dalam kod di atas, kami juga boleh menetapkan maxFileSize untuk mengehadkan saiz maksimum fail yang dimuat naik, maxNumberOfFiles untuk mengehadkan bilangan maksimum fail yang dimuat naik, tetapan dropZone menyokong muat naik seret dan lepas, autoUpload digunakan untuk menetapkan sama ada untuk mendayakan muat naik automatik, dsb.

Akhir sekali, kami juga boleh menambah bar kemajuan dan membatalkan fungsi muat naik, contohnya:

$(function () {
    $('#fileupload').fileupload({
        ...
        // 上传进度事件处理函数
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        },
        
        // 取消上传
        cancel: function (e) {
            ...
        }
    });

    // 进度条更新
    $('#fileupload').on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    });

    // 取消上传
    $('#fileupload .btn-danger').click(function () {
        $('#fileupload').fileupload('abort');
    });
});

Dalam kod di atas, kami menggunakan progressall untuk menambah fungsi bar kemajuan muat naik dan membatalkan untuk menambah fungsi pembatalan muat naik , dan kemudian ikat acara yang sepadan dengan kemas kini bar kemajuan dan butang pembatalan muat naik.

5. Ringkasan

Melalui tetapan di atas, kami berjaya menggunakan pemalam Muat Naik Fail jQuery untuk melaksanakan fungsi muat naik fail. Selain pilihan tetapan seperti jenis fail, saiz fail dan kuantiti muat naik, kami juga boleh menambah bar kemajuan dan membatalkan fungsi muat naik untuk menjadikan muat naik fail lebih mudah untuk pengguna. Pemalam Muat Naik Fail jQuery ialah alat yang sangat praktikal yang boleh memudahkan kerja pembangunan Jika anda perlu menggunakan fungsi muat naik fail, anda mungkin ingin mempelajarinya.

Atas ialah kandungan terperinci tetapan fail jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!