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 单选框,多选框美化代码
Aug 01 Javascript
Javascript条件判断使用小技巧总结
Sep 08 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
微信小程序图片自适应实现解析
Jan 21 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简单提示框alert封装函数
2010/08/08 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
React实现全选功能
2020/08/25 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
OpenCV 边缘检测
2019/07/10 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python tkinter组件使用详解
2019/09/16 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
PyQt QMainWindow的使用示例
2021/03/24 Python
航空大学应届生求职信
2013/11/10 职场文书
开学典礼感言
2014/02/16 职场文书
婚礼答谢礼品
2015/01/20 职场文书
业务员辞职信范文
2015/03/02 职场文书
工作能力自我评价2015
2015/03/05 职场文书
环保证明
2015/06/23 职场文书