jQuery插件之路(三)——文件上傳（支持拖拽上傳）

時間  2019-11-10
標籤 jquery 插件 之路 文件 上傳 支持 欄目 JQuery 简体版
原文   原文鏈接

 好了，此次咱一改往日的做風，就很少說廢話了，哈哈。先貼上源代碼地址，點擊獲取。而後直接進入主題啦，固然，若是你以爲我有哪裏寫的不對或者欠妥的地方，歡迎留言指出。在附上一些代碼以前，咱們仍是先來了解下，上傳文件的時候須要利用的一些必要的知識。
javascript

首先咱們要說的就是FileReader對象，這是一個HTML5提出的，專門用來異步的讀取用戶計算機上文件的對象，這裏有詳細的介紹。因此若是咱們想要使用它，那麼首先咱們得先建立一個FileReader對象。php

var fr = new FileReader()

一、這個對象擁有五個方法：css

方法名html

參數java

描述jquery

abortgit

無github

中斷讀取ajax

 readAsArrayBuffer瀏覽器

file

開始讀取file中的內容

readAsBinaryString

 file 將文件讀取爲二進制碼
readAsDataUrl file 將文件讀取爲URL
readAsText file,[encoding] 講文件讀取爲文本

下面附上一個例子：

<input type="file" id="file"/>
    <img src="" alt="" id="img">
    <script src="jquery.min.js"></script>
    <script>
        var ipt = $('#file'),
        img = $('#img');
        ipt.change(function () {
            var fr = new FileReader();
            fr.readAsDataURL(this.files[0]);
            fr.onload = function () {
                img.attr('src', fr.result);
            }
        })
    </script>

效果圖：，其餘的幾個方法也基本上大同小異，因此在這裏就不作過多解釋了。

二、這個對象還擁有三個狀態常量：

常量名 值 描述
EMPTY 0 尚未加載任何數據
LOADING 1 數據正在被加載
DONE 2 加載完畢

三、這個對象還擁有三個屬性：

屬性名 類型 描述
error DOMError 在讀取文件時發生的錯誤. 只讀.
readyState unsigned short 代表FileReader對象的當前狀態. 值爲State_constants中的一個. 只讀
result jsval 讀取到的文件內容.這個屬性只在讀取操做完成以後纔有效,而且數據的格式取決於讀取操做是由哪一個方法發起的. 只讀.

四、6個事件處理程序：

事件名 描述
onabort 當讀取操做被停止時調用
onerror 當讀取操做發生錯誤時調用.
onload 當讀取操做成功完成時調用.
onloadend 當讀取操做完成時調用,不論是成功仍是失敗.該處理程序在onload或者onerror以後調用.
onloadstart 當讀取操做將要開始以前調用
onprogress 在讀取數據過程當中週期性調用.

這裏咱們再來講說formData對象，一樣的咱們利用它來上傳文件，首先須要建立一個formData對象實例

var formData = new FormData();

這個對象有一個append方法，該方法接受三個參數：name、value、filename

參數名 描述
name　　 字段名稱
value 字段值.能夠是,或者一個字符串,若是全都不是,則該值會被自動轉換成字符串.
filename 可選，文件名。

在使用這個對象上傳文件的時候，咱們須要注意一點，須要在form標籤上添加上enctype="multipart/form-data"這個屬性，用來設置表單的MIME編碼，由於默認的編碼格式是application /x-www-form-urlencoded，不能用於文件上傳，也能夠在使用jQuery的$.ajax方法的時候，設置data屬性爲formData。

上面就是該DEMO主要用到的知識點，下面附上一些源代碼，和效果圖。

HTML代碼：

<div class="up_load_file">
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/uploadfile.js"></script>
    <script>
        $('.up_load_file').uploadfile({
            url : 'file.php',
            width : 500,
            height : 50,
            canDrag : true,
            canMultiple : true,
            success: function (fileName) {
                alert(fileName + '上傳成功');
            },
            error: function (fileName) {
                alert(fileName + '上傳失敗');
            },
            complete : function () {
                alert('全部文件上傳完畢');
            }
        });
    </script>

JS代碼：

;(function ($, undefined) {
    $.fn.uploadfile = function (setting) {
        var defaultSetting = {
            url : 'file.php',
            width : 600,
            height : 50,
            canDrag : true,
            canMultiple : true,
            success : function (fileName) {   //單個文件上傳成功的回調函數
            },
            error : function (fileName) {     //單個文件上傳失敗的回調函數
            },
            complete : function () {  //上傳完成的回調函數
            }
        };

        //判斷瀏覽器是否支持FileReader
        if(!window.FileReader){
            alert('您的瀏覽器不支持FileReader，請更換瀏覽器。');
            return;
        }

        setting = $.extend(true, {}, defaultSetting, setting);
        setting.width < 450 && (setting.width = 450);

        $(this).each(function (i, item) {
            var demoHtml = '';
            //是否能夠拖拽圖片上傳，構造dom結構
            if(setting.canDrag){
                setting.height < 200 && (setting.height = 200);
                demoHtml +=              '<div class="file_sel">';
                demoHtml +=                    '<div class="file_input">';
                demoHtml +=                        '<div class="sel_file_img">';
                demoHtml +=                            '<span><img src="img/add_img.png"/></span>';
                demoHtml +=                        '</div>';
                demoHtml +=                        '<div class="sel_file_btn">';
                demoHtml +=                            '<input type="file"/>';
                demoHtml +=                            '<button>點擊選擇文件</button>';
                demoHtml +=                        '</div>';
                demoHtml +=                    '</div>';
                demoHtml +=                    '<div class="file_drag">';
                demoHtml +=                        '<span>或者將文件拖到此處</span>';
                demoHtml +=                    '</div>';
                demoHtml +=                '</div>';
                demoHtml +=                '<div class="file_info_handle">';
                demoHtml +=                    '<div class="file_info">';
                demoHtml +=                        '當前選擇了<span class="file_count">0</span>個文件，共<span class="file_size">0</span>KB。';
                demoHtml +=                        '<input type="file"/>';
                demoHtml +=                        '<button class="continue_sel">繼續選擇</button>';
                demoHtml +=                        '<button class="uploadfile">開始上傳</button>';
                demoHtml +=                    '</div>';
                demoHtml +=                '</div>';
                demoHtml +=                '<div class="file_show">';
                demoHtml +=                '</div>';
            }else{
                setting.height < 50 && (setting.height = 50);
                $(item).addClass('noDrag');
                demoHtml +=        '<div class="file_info_handle">';
                demoHtml +=            '<div class="file_info">';
                demoHtml +=                '當前選擇了<span class="file_count">0</span>個文件，共<span class="file_size">0</span>KB。';
                demoHtml +=                '<input type="file"/>';
                demoHtml +=                '<button class="continue_sel">繼續選擇</button>';
                demoHtml +=                '<button class="uploadfile">開始上傳</button>';
                demoHtml +=            '</div>';
                demoHtml +=        '</div>';
                demoHtml +=        '<div class="file_show">';
                demoHtml +=            '<div class="sel_file_btn">';
                demoHtml +=                '<input type="file"/>';
                demoHtml +=                '<div class="sel_btn"></div>';
                demoHtml +=            '</div>';
                demoHtml +=        '</div>';
            }
            $(item).css({
                width : setting.width,
                height : setting.height,
                display : 'block'
            });
            $(item).html(demoHtml);

            //獲取DOM節點
            var fileArr = [],
            fileSize = 0,
            _this = $(item),
            fileDrag = $('.file_sel .file_drag', _this),
            selFileIpt = $('input[type=file]', _this),
            selFileBtn = selFileIpt.next();
            fileCount = $('.file_info_handle .file_info .file_count', _this),
            fileSz = $('.file_info_handle .file_info .file_size', _this),
            beginUpload = $('.file_info_handle .file_info .uploadfile', _this),
            fileShow = $('.file_show', _this),
            noDragSelFile = $('.file_show .sel_file_btn', _this);
            
            //顯示拖拽上傳部分
            setting.canDrag || fileShow.show();

            //是否能夠多選
            setting.canMultiple && selFileIpt.attr('multiple', 'multiple');

            //綁定事件
            selFileIpt.on('change', selFile);

            //讓按鈕去觸發input的click事件
            selFileBtn.on('click', function () {  
                $(this).prev().click();
            })

            fileDrag.on({
                dragover : dragOver, 
                drop : selFile
            })

            beginUpload.on('click', upLoadFile);

            

            // 選擇文件
            function selFile (e) {
                e = e || window.event;
                //阻止瀏覽器的默認行爲
                if(e.preventDefault){  
                    e.preventDefault();    
                }else{
                    e.returnValue = false;
                }
                var files = this.files || event.dataTransfer.files,
                src = 'img/',
                imgSrc;
                Array.prototype.forEach.call(files, function (item, i) {

                    //防止重複選擇相同的文件
                    var notExist = fileArr.some(function (existFile) {
                        return existFile.name === item.name;
                    })
                    if(notExist && fileArr.length != 0){
                        return !notExist;
                    }

                    fileArr.push(item);
                    var fr = new FileReader();
                    fr.readAsDataURL(item);
                    fr.onload = function () {

                        //判斷展現的文件類型
                        if(item.type.indexOf("image") > -1){
                            imgSrc = fr.result;
                        }else if(item.name.indexOf("rar") > -1){
                            imgSrc = src + 'rar.png';
                        }else if(item.name.indexOf("zip") > -1){
                            imgSrc = src + 'zip.png';
                        }else if(item.type.indexOf("text") > -1){
                            imgSrc = src + 'txt.png';
                        }else{
                            imgSrc = src + 'file.png';
                        }

                        //展現選擇的文件
                        var imgDom = $('<span class="img_box"><span class="up_load_success" title="上傳成功"></span><span class="img_handle"><span class="file_name" title="'+ item.name +'">'+ item.name +'</span><span class="icon-bin"></span></span><img src="'+ imgSrc +'"/></span>');
                        if(setting.canDrag){
                            fileShow.css('display') === 'none' && fileShow.show();
                            fileShow.append(imgDom);
                        }else{
                            fileShow.css('display') === 'none' && fileShow.show();
                            noDragSelFile.before(imgDom);
                        }
                    }
                }) 

                //選擇的文件的信息
                fileCount.html(fileArr.length);
                fileSz.html(getFileInfo());

                //防止在刪除了上次選擇的文件後，再次選擇相同的文件無效的問題。
                this.value ='';  
            }

            //拖拽
            function dragOver (e) {
                var event = e || window.event;
                event.preventDefault();
            }

            //上傳文件
            function upLoadFile () {
                if(!fileArr.length){
                    alert('請選擇文件');
                    return;
                }
                fileArr.forEach(function (item, i) {
                    var upLoadSuccess = $('.img_box').eq(i).children('.up_load_success');
                    
                    //防止重複上傳
                    if(upLoadSuccess.css('display') === 'block') return false;   
                    var formData = new FormData();
                    formData.append('file', item);
                    $.ajax({
                        url: setting.url,
                        type: 'POST',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false
                    }).done(function(res) {
                        //上傳成功圖標
                        upLoadSuccess.show();

                        //單個文件上傳成功執行回調
                        setting.success(item.name);

                        //所有文件上傳完成執行回調函數
                        (i === (fileArr.length - 1)) && setting.complete();
                    }).fail(function(res) {
                        //單個文件上傳失敗執行回調
                        setting.error(item.name);

                        (i === (fileArr.length - 1)) && setting.complete();
                    });
                })
            }

            //計算文件信息
            function getFileInfo () {
                //每次從新計算大小，防止單位不一樣形成錯誤
                fileSize = 0;
                fileArr.forEach(function (item, i) {
                    fileSize += item.size;
                })
                fileSize = (fileSize / 1024).toFixed(2);
                return fileSize;
            }

            fileShow.on('click', '.icon-bin' , function () {
                //刪除節點
                var index = $(this).parents('.img_box').index();
                $(this).parents('.img_box').remove();

                //刪除上傳文件
                fileArr.splice(index, 1);

                //修改文件信息
                fileCount.html(fileArr.length);
                fileSz.html(getFileInfo());

                //隱藏文件顯示區域
                !setting.canDrag || fileArr.length || fileShow.hide();
            })
        })
    }
})(jQuery)
View Code

後臺PHP代碼：

$fileName = $_FILES['file']['name'];
    $type = $_FILES['file']['type'];
    $size = $_FILES['file']['size'];
    $fileAlias = $_FILES["file"]["tmp_name"];

    if($fileAlias){
        move_uploaded_file($fileAlias, "uploadfile/" . $fileName);
    }
    echo 'fileName: ' . $fileName . ', fileType: ' . $type . ', fileSize: ' . ($size / 1024) . 'KB';

 

支持拖拽上傳樣式。不支持拖拽的樣式。

代碼中一些必要的地方已經寫好註釋了，這裏也就不作過多解釋，今天就先寫到這裏了。做者敲代碼也不容易，若是你以爲這些內容還有那麼一些價值的話，請點下贊，謝謝^_^。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程