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"這個屬性，用來設(shè)置表單的MIME編碼，因為默認的編碼格式是application /x-www-form-urlencoded，不能用于文件上傳，也可以在使用jQuery的$.ajax方法的時候，設(shè)置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';
支持拖拽上傳樣式:
不支持拖拽的樣式:
代碼中一些必要的地方已經(jīng)寫好注釋了，這里也就不做過多解釋，今天就先寫到這里了，謝謝作者的分享。
更多精彩內(nèi)容，請點擊《jQuery上傳操作匯總》，進行深入學習和研究。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
用戶輸入一個表單，輸入準考證和驗證碼，驗證用戶是否輸入表單，點擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來2012-10-10
jQuery插件zTree實現(xiàn)單獨選中根節(jié)點中第一個節(jié)點示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)單獨選中根節(jié)點中第一個節(jié)點的方法,結(jié)合實例形式分析了jQuery樹形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery中的select操作詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)
下面小編就為大家?guī)硪黄猵icLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jQuery function想必大家都不會陌生，web前端開發(fā)人員經(jīng)常會接觸到，下面為大家介紹下它的正確書寫方法，感興趣的朋友可以參考下2013-08-08
本文以展開圖片和收縮圖片為例為大家介紹下Jquery事件的連接的使用方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
這篇文章主要介紹了jQuery中offsetParent()方法用法,實例分析了offsetParent()方法的功能、定義及返回匹配元素所有祖先元素中第一個采用定位的祖先元素時的使用技巧,需要的朋友可以參考下2015-01-01
Jquery replace 字符替換實現(xiàn)代碼，需要的朋友可以參考下。2010-12-12
本文分享了利用jQuery實現(xiàn)的查看全文功能：文本內(nèi)容少于四行，不顯示查看全文；超過五行時才顯示出來并有此功能；很實用，下面就跟小編一起來看看吧2016-12-12
詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
這篇文章主要為大家剖析了JavaScript for循環(huán)中發(fā)送AJAX請求問題，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03