jQuery File Upload 文件上傳插件使用一 (最小安裝基本版)

時間 2019-11-19

標籤 jquery file upload 文件上傳插件使用最小安裝基本欄目 JQuery 简体版

原文原文鏈接

jQuery File Upload 是一款很是強大的文件上傳處理插件，支持多文件上傳，拖拽上傳，進度條，文件驗證及圖片音視頻預覽，跨域上傳等等。php

能夠說你能想到的功能它都有。你沒想到的功能它也有。。css

不過因爲功能太強大，使用起來仍是須要點基本功，不然調試開發會遇到困難。html

本文結合官方教程只介紹最基本的上傳功能。python

以我目前最新的9.7.1版本jquery

下載下來解壓到服務器能訪問到的地方。git

文件以下：github

1. 新建一個文件夾MyDemo或者你隨意。ajax

把外面的server和js目錄拷貝到裏面，注意server目錄裏面包含gae-go、gae-python、php這些後端語言，只保留php就行。json

2. 新建一html，內容以下，主要JS和CSS的路徑。還有有時候國內沒法訪問ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js，能夠引用本地的jQuery。後端

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
    height: 18px;
    background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',

        // 上傳完成後的執行邏輯
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },

        // 上傳過程當中的回調函數
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $(".bar").text(progress + '%');
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
});
</script>

<!-- 進度條 -->
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>
</body>
</html>

傳統上都是用<form>表單提交上傳，如今是純Ajax。須要注意的input的data-url屬性，這就是須要php服務端處理的路徑。

瀏覽器打開，以個人爲例 http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/

因爲是在本地測試，爲了看到進度進度效果，建議找個大點的(~1G)文件上傳。能夠直接拖個文件到瀏覽器窗口中。

效果以下，上傳過程當中綠色進度條會不停的增長。

F12打開調試面板，耐心等待上傳完成，會看到上傳完成後，有ajax返回。

地址相似：http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/

返回的數據是JSON格式，內容相似：

{"files":[{"name":"1409665745-8365","size":1472358262,"type":"multipart\/form-data; boundary=----WebKitFormBoundaryxLzvFFmSOiWiY1Ka","error":"The uploaded file exceeds the post_max_size directive in php.ini"}]}

很明顯上傳文件太大了，超出php.ini限制。先不改了。

若是咱們直接丟個圖片進去，返回的json相似：

{
    "files": [
        {
            "name": "10095978136d36c635.jpg",
            "size": 12479,
            "type": "image/jpeg",
            "url": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/10095978136d36c635.jpg",
            "thumbnailUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/thumbnail/10095978136d36c635.jpg",
            "deleteUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/?file=10095978136d36c635.jpg",
            "deleteType": "DELETE"
        }
    ]
}

來到MyDemo\server\php\files 會發現上傳的圖片，並且thumbnail目錄還保存了裁剪過的圖片，這都是官方提供的UploadHandler.php的功勞。

至此，一個拖拽上傳文件的Demo完成了。可是功能仍然很弱，好比沒有文件類型及大小限制，沒有前臺的錯誤提示。

官方提供的API有maxFileSize和acceptFileTypes。這在基本版裏是不生效的，在UI版裏才能夠。具體的完善功能見第二篇

詳見 maxFileSize and acceptFileTypes not working #760。

相關標籤/搜索

jQuery File Upload 文件上傳插件使用一 (最小安裝 基本版)

jQuery File Upload 文件上傳插件使用一 (最小安裝基本版)