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 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
jQuery表单验证之密码确认
May 22 jQuery
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
如何在Vue中抽离接口配置文件
Oct 31 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截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php生成图片验证码的方法
2016/04/15 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
Python实现扩展内置类型的方法分析
2017/10/16 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python 构造三维全零数组的方法
2018/11/12 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python如何计算语句执行时间
2019/11/22 Python
python科学计算之narray对象用法
2019/11/25 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
物业品质提升方案
2014/06/08 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
民间借贷借条如何写
2015/05/26 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers
Python中requests库的用法详解
2022/06/05 Python