jQuery插件实现⽂件上传功能（⽀持拖拽）
先贴上源代码地址，。然后直接进⼊主题啦，当然，如果你觉得我有哪⾥写的不对或者⽋妥的地⽅，欢迎留⾔指出。在附上⼀些代码之前，我们还是先来了解下，上传⽂件的时候需要利⽤的⼀些必要的知识。
⾸先我们要说的就是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();
jquery下载文件插件
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 = ();
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');
//绑定事件
<('change', selFile);
//让按钮去触发input的click事件
<('click', function () {
$(this).prev().click();
})
<({
dragover : dragOver,
drop : selFile
})
<('click', upLoadFile);
// 选择⽂件
function selFile (e) {
e = e || window.event;
//阻⽌浏览器的默认⾏为
if(e.preventDefault){
e.preventDefault();
}else{
}
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();
//判断展⽰的⽂件类型
pe.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 pe.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="'+ im 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());linux基本命令不能用
//防⽌在删除了上次选择的⽂件后，再次选择相同的⽂件⽆效的问题。
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)) && settingplete();
}).fail(function(res) {
//单个⽂件上传失败执⾏回调
<(item.name);
(i === (fileArr.length - 1)) && settingplete();
});
})
}
//计算⽂件信息
function getFileInfo () {
//每次重新计算⼤⼩，防⽌单位不同造成错误
fileSize = 0;
fileArr.forEach(function (item, i) {
fileSize += item.size;
})
fileSize = (fileSize / 1024).toFixed(2);
return fileSize;
}
<('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'];
scripture词根$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';
⽀持拖拽上传样式:
不⽀持拖拽的样式:
代码中⼀些必要的地⽅已经写好注释了，这⾥也就不做过多解释，今天就先写到这⾥了，谢谢作者的分享。更多精彩内容，请点击，进⾏深⼊学习和研究。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论