jQuery插件實(shí)現(xiàn)文件上傳功能(支持拖拽)
先貼上源代碼地址,點(diǎn)擊獲取。然后直接進(jìn)入主題啦,當(dāng)然,如果你覺得我有哪里寫的不對(duì)或者欠妥的地方,歡迎留言指出。在附上一些代碼之前,我們還是先來(lái)了解下,上傳文件的時(shí)候需要利用的一些必要的知識(shí)。
首先我們要說(shuō)的就是FileReader對(duì)象,這是一個(gè)HTML5提出的,專門用來(lái)異步的讀取用戶計(jì)算機(jī)上文件的對(duì)象,這里有詳細(xì)的介紹。所以如果我們想要使用它,那么首先我們得先創(chuàng)建一個(gè)FileReader對(duì)象。
var fr = new FileReader()
1、這個(gè)對(duì)象擁有五個(gè)方法:
下面附上一個(gè)例子:
<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>
效果圖:
其他的幾個(gè)方法也基本上大同小異,所以在這里就不做過(guò)多解釋了。
2、這個(gè)對(duì)象還擁有三個(gè)狀態(tài)常量:
3、這個(gè)對(duì)象還擁有三個(gè)屬性:
4、6個(gè)事件處理程序:
這里我們?cè)賮?lái)說(shuō)說(shuō)formData對(duì)象,同樣的我們利用它來(lái)上傳文件,首先需要?jiǎng)?chuàng)建一個(gè)formData對(duì)象實(shí)例
var formData = new FormData();
這個(gè)對(duì)象有一個(gè)append方法,該方法接受三個(gè)參數(shù):name、value、filename
在使用這個(gè)對(duì)象上傳文件的時(shí)候,我們需要注意一點(diǎn),需要在form標(biāo)簽上添加上enctype="multipart/form-data"這個(gè)屬性,用來(lái)設(shè)置表單的MIME編碼,因?yàn)槟J(rèn)的編碼格式是application /x-www-form-urlencoded,不能用于文件上傳,也可以在使用jQuery的$.ajax方法的時(shí)候,設(shè)置data屬性為formData。
上面就是該DEMO主要用到的知識(shí)點(diǎn),下面附上一些源代碼,和效果圖。
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) { //單個(gè)文件上傳成功的回調(diào)函數(shù) }, error : function (fileName) { //單個(gè)文件上傳失敗的回調(diào)函數(shù) }, complete : function () { //上傳完成的回調(diào)函數(shù) } }; //判斷瀏覽器是否支持FileReader if(!window.FileReader){ alert('您的瀏覽器不支持FileReader,請(qǐng)更換瀏覽器。'); 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>點(diǎn)擊選擇文件</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 += '當(dāng)前選擇了<span class="file_count">0</span>個(gè)文件,共<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 += '當(dāng)前選擇了<span class="file_count">0</span>個(gè)文件,共<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é)點(diǎn) 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; //阻止瀏覽器的默認(rèn)行為 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) { //防止重復(fù)選擇相同的文件 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()); //防止在刪除了上次選擇的文件后,再次選擇相同的文件無(wú)效的問(wèn)題。 this.value =''; } //拖拽 function dragOver (e) { var event = e || window.event; event.preventDefault(); } //上傳文件 function upLoadFile () { if(!fileArr.length){ alert('請(qǐng)選擇文件'); return; } fileArr.forEach(function (item, i) { var upLoadSuccess = $('.img_box').eq(i).children('.up_load_success'); //防止重復(fù)上傳 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) { //上傳成功圖標(biāo) upLoadSuccess.show(); //單個(gè)文件上傳成功執(zhí)行回調(diào) setting.success(item.name); //全部文件上傳完成執(zhí)行回調(diào)函數(shù) (i === (fileArr.length - 1)) && setting.complete(); }).fail(function(res) { //單個(gè)文件上傳失敗執(zhí)行回調(diào) setting.error(item.name); (i === (fileArr.length - 1)) && setting.complete(); }); }) } //計(jì)算文件信息 function getFileInfo () { //每次重新計(jì)算大小,防止單位不同造成錯(cuò)誤 fileSize = 0; fileArr.forEach(function (item, i) { fileSize += item.size; }) fileSize = (fileSize / 1024).toFixed(2); return fileSize; } fileShow.on('click', '.icon-bin' , function () { //刪除節(jié)點(diǎn) 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)
后臺(tái)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';
支持拖拽上傳樣式:
不支持拖拽的樣式:
代碼中一些必要的地方已經(jīng)寫好注釋了,這里也就不做過(guò)多解釋,今天就先寫到這里了,謝謝作者的分享。
更多精彩內(nèi)容,請(qǐng)點(diǎn)擊《jQuery上傳操作匯總》,進(jìn)行深入學(xué)習(xí)和研究。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JQuery Dialog(JS 模態(tài)窗口,可拖拽的DIV)
- JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
- jQuery拖拽div實(shí)現(xiàn)思路
- jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
- 如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
- 簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼
- JQuery之拖拽插件實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
- jQuery EasyUI API 中文文檔 - Draggable 可拖拽
- jquery實(shí)現(xiàn)拖拽小方塊效果
相關(guān)文章
jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)
下面小編就為大家?guī)?lái)一篇picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jQuery中offsetParent()方法用法實(shí)例
這篇文章主要介紹了jQuery中offsetParent()方法用法,實(shí)例分析了offsetParent()方法的功能、定義及返回匹配元素所有祖先元素中第一個(gè)采用定位的祖先元素時(shí)的使用技巧,需要的朋友可以參考下2015-01-01Jquery replace 字符替換實(shí)現(xiàn)代碼
Jquery replace 字符替換實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-12-12基于jQuery實(shí)現(xiàn)的查看全文功能【實(shí)用】
本文分享了利用jQuery實(shí)現(xiàn)的查看全文功能:文本內(nèi)容少于四行,不顯示查看全文;超過(guò)五行時(shí)才顯示出來(lái)并有此功能;很實(shí)用,下面就跟小編一起來(lái)看看吧2016-12-12詳解JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問(wèn)題
這篇文章主要為大家剖析了JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問(wèn)題,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03