logo
 JavaScript >> Javascript 文檔 >  >> jQuery

迷你 AJAX 文件上傳表單

在本教程中，我們將創建一個 AJAX 文件上傳表單，讓訪問者可以通過拖放或單獨選擇從瀏覽器上傳文件。為此，我們將強大的 jQuery File Upload 插件與簡潔的 jQuery Knob 相結合，呈現一個流暢的 CSS3/JS 驅動界面。

HTML

像往常一樣，我們將從一個基本的 HTML5 文檔開始：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Mini Ajax File Upload Form</title>

        <!-- Google web fonts -->
        <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

        <!-- The main CSS file -->
        <link href="assets/css/style.css" rel="stylesheet" />
    </head>

    <body>

        <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple />
            </div>

            <ul>
                <!-- The file uploads will be shown here -->
            </ul>

        </form>

        <!-- JavaScript Includes -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="assets/js/jquery.knob.js"></script>

        <!-- jQuery File Upload Dependencies -->
        <script src="assets/js/jquery.ui.widget.js"></script>
        <script src="assets/js/jquery.iframe-transport.js"></script>
        <script src="assets/js/jquery.fileupload.js"></script>

        <!-- Our main JS file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

在文檔的開頭，我包含了來自 Google Webfonts 的兩種字體，在結束 標記之前，您可以看到一些 JavaScript 庫。這些是 jQuery 庫、jQuery Knob 插件和 jQuery File Upload 插件的依賴項。

頁面上的主要元素是 #upload 形式。裡面是 #drop div（接受拖放上傳）和一個無序列表。此列表將為每個傳輸的文件保存一個 li 項目。您可以在下面看到為文件上傳生成的標記：

<li class="working">
    <input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
    <p>Sunset.jpg <i>145 KB</i></p>
    <span></span>
</li>

上面代碼片段中的輸入項被 CSS 隱藏。它的唯一目的是初始化 jQuery Knob 插件，它將輸出一個漂亮的基於畫布的旋鈕控件。輸入有許多 data-* 修改旋鈕外觀的屬性。稍後，當我們監聽文件上傳進度時，我們將更新此輸入的值，這將導致旋鈕重新繪製。 span 將圖標保持在右側；這可以是複選標記或紅十字。

jQuery 代碼

訪問者可以通過兩種方式使用此表單上傳文件：

  • 將它們放在 #drop 上 div（在除 IE 之外的所有瀏覽器中）；
  • 通過點擊瀏覽按鈕。這將模擬點擊隱藏文件輸入，這將帶來系統的文件瀏覽窗口。請注意，文件輸入具有 multiple 參數集，這將允許在給定時間選擇多個文件（但文件仍將單獨上傳！）。

該插件的默認行為是將文件放入隊列中，但我們會在文件被刪除/選擇時自動上傳文件，這將使體驗更加直觀。可以看到下面的JS：

assets/js/script.js

$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });

    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

jQuery File Upload 庫帶有自己的 jQuery UI 驅動設計，您可以立即使用。但是，因為我們需要一個完全自定義的界面，所以我們將使用插件的基本版本，它不包含界面。為了讓它工作，我們傳遞了一些配置選項/回調。在上面的代碼中，這些是：

  • 放置區 - 此屬性保存將作為放置目標的元素的 jQuery 選擇器。放置在其上的文件將被添加到上傳隊列中。
  • 添加 - 每當將文件添加到隊列中時，都會調用此回調函數。在其中，我們創建代表文件的 HTML 標記，將其添加到 UL 並觸發 data.submit() 方法。這將導致添加的文件無需等待即可直接上傳。
  • 進展 - 此回調由插件每 100 毫秒執行一次（可配置）。第二個參數（數據屬性）保存文件大小和已傳輸的字節數。這允許我們計算百分比，然後更新隱藏的輸入元素，進而更新旋鈕。
  • 失敗 - 如果您的 PHP 腳本有問題，則會執行此回調函數。這很可能意味著 upload.php 丟失或引發某種錯誤（使用您的網絡瀏覽器的檢查器在此處調試任何潛在問題）。

data.context 在插件的方法調用之間保留屬性。這樣我們就知道應該在進度和失敗事件中更新哪個 LI 項。

PHP 腳本

jQuery File Upload 還附帶了一個強大的 PHP 腳本，用於處理可以放在服務器上的文件上傳，但對於本教程，我們將構建自己的。該插件發送的文件上傳實際上與常規表單上傳相同 - 您可以通過 $_FILES 數組訪問有關上傳的信息：

<?php

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
        echo '{"status":"success"}';
        exit;
    }
}

echo '{"status":"error"}';
exit;

正如我在後面提到的，雖然我們可以一次選擇一堆文件，但它們是一個一個上傳的。這使得使用我們的 PHP 腳本處理它們變得更加容易。目前，文件只是簡單地移動到 uploads 文件夾，但您可以通過添加身份驗證或在數據庫中創建記錄來擴展它。

我們完成了！

我希望你發現這個 ajax 文件上傳表單很有用！如果您有任何建議或問題，請在我們的評論區留言。

資源和進一步閱讀

  • jQuery Knob 插件主頁
  • jQuery File Upload 插件 github 頁面
  • jQuery 文件上傳 API
  • jQuery 文件上傳選項
  • jQuery 文件上傳常見問題解答
  • 如何使用拖拽效果增強拖放區
  • 本教程的設計靈感來源於運球鏡頭

上一篇
下一篇
Tutorial JavaScript 教程

  1. Next-translate 1.0 演示 - I18n 你的 Next.js +10 頁面以一種簡單的方式

  2. 使用 movieDB API 創建的 Netflix 風格 Node.js 項目

  3. #3 of 100DaysOfCode

  4. 使用 Xstate 在 React 中構建收購漏斗

  5. Node.js 模塊入門：require、exports、imports 等

  6. Angular 13 材質進度條教程示例

  7. Jquery 和 Slimframework – 狀態請求

  1. 使用 Python 和 Selenium 抓取我的 Twitter 社交圖譜

  2. 在 Flutter Web 應用中實現路由保護

  3. 我喜歡和你說話，網頁！

  4. 如何在 TypeScript 中創建接口

  5. 如何對 url 進行 JSON 調用？

  6. 更準確的類型，更好的代碼

  7. TypeScript 索引簽名

  1. 放大一個點（使用縮放和平移）

  2. Vue 拯救 AngularJS 應用程序

  3. 使用 Airtable 和 Firebase 收集和處理用戶提交的圖像

  4. JavaScript 遞歸函數數組 |計算整數數組的總和