jQuery插件實現文件上傳功能（支持拖拽）

2019-11-20 09:41:26

字體：大中小

來源：轉載

供稿：網友

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

首先我們要說的就是FileReader對象，這是一個HTML5提出的，專門用來異步的讀取用戶計算機上文件的對象，這里有詳細的介紹。所以如果我們想要使用它，那么首先我們得先創建一個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、這個對象還擁有三個狀態常量：

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

4、6個事件處理程序：

這里我們再來說說formData對象，同樣的我們利用它來上傳文件，首先需要創建一個formData對象實例
var formData = new FormData();
這個對象有一個append方法，該方法接受三個參數：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)

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

支持拖拽上傳樣式: