jQuery上傳文件到後端詳解

概述

文件上傳在web開發中非常常見，而jQuery作為目前最為流行的JavaScript庫之一，也提供了豐富的上傳組件和方法。在本文中，我們將詳細闡述如何使用jQuery上傳文件到後端，包括jQuery上傳文件的基本原理、批量上傳、多圖上傳、上傳進度顯示等方面。

二、jQuery文件上傳的基本原理

在前端上傳文件到後端，可通過三種方式進行：

1.通過表單的元素進行上傳；

2.通過Ajax方式上傳文件；

3.通過隱藏的iframe進行上傳。

其中，第一種方式是最為常見的上傳方式，也是最為簡單的，我們將在下面的章節中對其進行詳細闡述。

三、jQuery上傳文件插件

jQuery提供了豐富的上傳插件，我們在開發中，可以直接引用這些插件來完成文件上傳。目前最為常用的jQuery文件上傳插件包括：

1. jQuery File Upload

jQuery File Upload是一款非常強大的jQuery文件上傳插件，它不僅支持文件上傳，還支持遞歸目錄上傳、圖片縮略圖生成等功能。這款插件源自於blueimp文件上傳插件，但相對於原版，它增加了很多新功能和細節優化。

$('#fileupload').fileupload({
    url: 'server/php/',
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('').text(file.name).appendTo(document.body);        });    },    progressall: function (e, data) {        var progress = parseInt(data.loaded / data.total * 100, 10);        $('#progress .bar').css(            'width',            progress + '%'        );    }});

2. jQuery Uploadify

jQuery Uploadify是一款經典的jQuery文件上傳插件，其特點是支持多文件上傳、進度條顯示、圖片預覽、文件拖拽等功能，但該插件已經停止更新，不再推薦使用。

$('#file_upload').uploadify({
    'swf'      : '/uploadify/uploadify.swf',
    'uploader' : '/uploadify/uploadify.php',
    'onUploadSuccess' : function(file, data, response) {
        alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
    }
});

四、jQuery批量上傳文件到後端

如果需要批量上傳文件到服務器，只需要在表單的元素中添加multiple屬性即可。在上傳時，只需通過循環獲取每個文件對象，逐個傳送到服務器即可。

$('form').submit(function (event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    $.each($("input[type='file']")[0].files, function(i, file) {
        formData.append('file-'+i, file);
    });
    $.ajax({
        url: '/path/to/server',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            alert(returndata);
        },
        error: function(returndata) {
            alert(returndata);
        }
    });
});

五、jQuery多圖上傳

在上傳圖片時，我們通常會需要上傳多張圖片，jQuery提供了相關的插件來方便實現多圖上傳。其中最為常用的是jQuery File Upload插件，以及其衍生出來的blueimp Gallery插件。

$('#fileupload').fileupload({
    url: 'server/php/',
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('').attr({
                href: file.url,
                title: file.name
            }).appendTo('#gallery');
        });
        $('#gallery').blueimpGallery({
            event: 'click',
            onslide: function (index, slide) {
                var url = $(slide).find('img').attr('src');
                $.get(url, function (result) {
                    $(slide).find('img').attr('src', url).fadeOut(function () {
                        $(this).fadeIn();
                    });
                });
            }
        });
    }
});

六、elementui上傳文件到後端

除此之外，elementui也提供了上傳文件的組件。使用elementui上傳文件組件可以方便快捷地實現上傳文件的功能，同時提供上傳進度展示、上傳成功後預覽、圖片壓縮等多個實用特性。


    選取文件
    上傳到服務器

七、前端上傳文件到後端的進度顯示

在文件上傳過程中，我們希望能夠清楚地看到上傳進度，jQuery也提供了相應的解決方案。可以通過監聽Ajax的progress事件，實時更新上傳進度條的狀態。

var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
    xhr.upload.addEventListener('progress', function(event) {
        var percent = 0;
        var position = event.loaded || event.position;
        var total = event.total;
        if (event.lengthComputable) {
            percent = Math.ceil(position / total * 100);
            //處理進度條的相關操作
        }
    }, false);
}