jQuery插件實現(xiàn)文件上傳功能（支持拖拽）

更新時間：2020年08月27日 09:05:04 作者：蜀北喬少恭

這篇文章主要介紹了jQuery插件實現(xiàn)文件上傳功能，可支持拖拽文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先貼上源代碼地址，點擊獲取。然后直接進入主題啦，當然，如果你覺得我有哪里寫的不對或者欠妥的地方，歡迎留言指出。在附上一些代碼之前，我們還是先來了解下，上傳文件的時候需要利用的一些必要的知識。

首先我們要說的就是FileReader對象，這是一個HTML5提出的，專門用來異步的讀取用戶計算機上文件的對象，這里有詳細的介紹。所以如果我們想要使用它，那么首先我們得先創(chuàng)建一個FileReader對象。
var fr = new FileReader()

1、這個對象擁有五個方法：

下面附上一個例子：

<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>

效果圖：

其他的幾個方法也基本上大同小異，所以在這里就不做過多解釋了。

2、這個對象還擁有三個狀態(tài)常量：

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

4、6個事件處理程序：

這里我們再來說說formData對象，同樣的我們利用它來上傳文件，首先需要創(chuàng)建一個formData對象實例
var formData = new FormData();
這個對象有一個append方法，該方法接受三個參數(shù)：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) { //單個文件上傳成功的回調(diào)函數(shù)
 },
 error : function (fileName) { //單個文件上傳失敗的回調(diào)函數(shù)
 },
 complete : function () { //上傳完成的回調(diào)函數(shù)
 }
 };

 //判斷瀏覽器是否支持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 = '';
 //是否可以拖拽圖片上傳，構(gòu)造dom結(jié)構(gòu)
 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">繼續(xù)選擇</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">繼續(xù)選擇</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節(jié)點
 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);

 //讓按鈕去觸發(fā)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();

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

 //全部文件上傳完成執(zhí)行回調(diào)函數(shù)
 (i === (fileArr.length - 1)) && setting.complete();
 }).fail(function(res) {
 //單個文件上傳失敗執(zhí)行回調(diào)
 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 () {
 //刪除節(jié)點
 var index = $(this).parents('.img_box').index();
 $(this).parents('.img_box').remove();

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

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

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

后臺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';

支持拖拽上傳樣式: