jQuery插件实现文件上传功能(支持拖拽)


Posted in Javascript onAugust 27, 2020

先贴上源代码地址,点击获取。然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出。在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识。

 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍。所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象。
 var fr = new FileReader()

1、这个对象拥有五个方法:

jQuery插件实现文件上传功能(支持拖拽)

下面附上一个例子:

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

效果图:

jQuery插件实现文件上传功能(支持拖拽)

其他的几个方法也基本上大同小异,所以在这里就不做过多解释了。

2、这个对象还拥有三个状态常量:

jQuery插件实现文件上传功能(支持拖拽)

3、这个对象还拥有三个属性:

jQuery插件实现文件上传功能(支持拖拽)

4、6个事件处理程序:

jQuery插件实现文件上传功能(支持拖拽)

这里我们再来说说formData对象,同样的我们利用它来上传文件,首先需要创建一个formData对象实例
var formData = new FormData();
这个对象有一个append方法,该方法接受三个参数:name、value、filename

jQuery插件实现文件上传功能(支持拖拽)

在使用这个对象上传文件的时候,我们需要注意一点,需要在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';

支持拖拽上传样式:

jQuery插件实现文件上传功能(支持拖拽)

不支持拖拽的样式:

jQuery插件实现文件上传功能(支持拖拽)

代码中一些必要的地方已经写好注释了,这里也就不做过多解释,今天就先写到这里了,谢谢作者的分享。

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery的事件预绑定
Dec 05 Javascript
bootstrap表单示例代码分享
May 18 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
jQuery插件实现图片轮播特效
Jun 16 #Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 #Javascript
js学习阶段总结(必看篇)
Jun 16 #Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 #Javascript
jQuery获取剪贴板内容的方法
Jun 16 #Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 #Javascript
全面理解JavaScript中的继承(必看)
Jun 16 #Javascript
You might like
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
深入理解js promise chain
2016/05/05 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
遗传算法python版
2018/03/19 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
应届生求职推荐信
2013/10/28 职场文书
邮政员工辞职信
2014/01/16 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
社区服务活动总结
2014/05/07 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
作息时间调整通知
2015/04/22 职场文书
高三生物教学反思
2016/02/22 职场文书
python Polars库的使用简介
2021/04/21 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫