位置: IT常识 - 正文

前端实现文件上传(点击+拖拽)(前端实现文件上传的命令)

编辑:rootadmin
前端实现文件上传(点击+拖拽) 一、简介

推荐整理分享前端实现文件上传(点击+拖拽)(前端实现文件上传的命令),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端文件格式,前端实现文件上传下载,前端文件格式,前端写入文件,前端实现文件上传的命令,前端实现文件上传的命令,前端实现文件上传下载,前端实现文件上传下载,内容如对您有帮助,希望把文章链接给更多的朋友!

之前在Vue项目中使用过element的上传组件,实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传,说干就干。 首先是点击获取上传文件自然没的说,只需要借助input标签即可,但原生的点击上传按钮,实在是过于简陋,所以我的想法是通过一个div,模拟成上传按钮,然后监听其点击事件,通过input.click()去模拟点击真正的上传元素。 然后是拖拽获取上传文件,这个稍有难度,我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取,但是由于是html5新增的,所以可能在某些低版本IE浏览器不兼容,所以如果要在实际企业级项目中使用,需要注意一下兼容性问题(IE该死!)。

前端实现文件上传(点击+拖拽)(前端实现文件上传的命令)

最后当我们获取到上传文件之后,我们就可以借助formDate对象以及ajax工具(原生、jquery、axios等)进行文件上传了,而且我们还可以通过xhr.upload.onprogress获取文件上传的进度在页面中进行展示。

二、获取文件1、页面效果

2、点击和拖拽上传获取的文件结果

3、具体代码 <style> .box { width: 300px; height: 300px; margin: 50px auto; padding-top: 30px; background-color: #f5f5f5; border-radius: 10px; } .btn { width: 200px; height: 30px; line-height: 30px; margin: 10px auto; text-align: center; color: #5098F8; border-radius: 4px; border: 1px dashed #5098F8; cursor: pointer; } </style><body> <!-- 这个id属性放在哪个盒子里面 哪个盒子的范围就是拖拽上传的范围 --><div class="box" id="drop"> <!-- 用来展示的上传按钮 --> <div class="btn" id="btn">点击上传按钮</div> <!-- 实际实现上传的input 并限制文件类型(不保险,因为用户可以放手放开限制,选择所有类型文件,所以需要在上传之前进行第二次验证) --> <input type="file" id="file-btn" onchange="selectFile(event)" accept=".doc,.docx" style="display: none;"></div><script> var file = null // 要进行上传的文件 // 给上传按钮绑定点击事件 document.querySelector('#btn').onclick = function() { // 模拟点击上传的input 弹出文件选择框 document.querySelector('#file-btn').click() } // 获取点击上传 选择的文件 function selectFile(e) { // 通过 e.target.files 获取到选择的文件 此处默认选择一个文件 console.log('获取点击上传的文件---',e.dataTransfer.files[0]); // 第二次验证选择的文件类型是否正确 if(e.target.files[0].type == 'application/msword' || e.target.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { file = e.target.files[0] } else { alert('请选择正确的文件类型') } } // 拖拽上传获取对应文件 let dropBox=document.querySelector('#drop'); // 当文件在目标元素内移动时 dropBox.addEventListener('dragover',function(e){ // 阻止事件冒泡 e.stopPropagation(); // 阻止默认事件(与drop事件结合,阻止拖拽文件在浏览器打开的默认行为) e.preventDefault(); }) // 当拖拽文件在目标元素内松开时 dropBox.addEventListener('drop',function(e){ // 阻止事件冒泡 e.stopPropagation(); // 阻止默认事件(与dragover事件结合,阻止拖拽文件在浏览器打开的默认行为) e.preventDefault(); // 获取拖拽上传的文件(files是个数组 此处默认限制只能上传一个) console.log('获取拖拽上传的文件---',e.dataTransfer.files[0]); // 第二次验证选择的文件类型是否正确 if(e.dataTransfer.files[0].type == 'application/msword' || e.dataTransfer.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { file = e.dataTransfer.files[0] } else { alert('请选择正确的文件类型') } })</script></body>注:用户手动放开限制操作(此处以mac电脑为例,windows电脑也相差不多),只需下面三步:

三、进行上传

我们需要借助formDate对象以及ajax工具(原生、jquery、axios等)进行文件上传,而且我们还可以通过xhr.upload.onprogress获取文件上传的进度在页面中进行展示,不过我们通过xhr.upload.onprogress获取的仅仅是文件上传到服务器的进度,并不包括服务器进行处理以及基于前端响应的这部分时间,所以会当前端文件上传到100%后,会停滞一段时间才能获得服务端的响应。 此处列举两种方式:原生ajax和axios。

1、原生ajax // 上传函数 function uplaod() { // 创建 FormData 对象 var formData = new FormData(); // 将获得文件对象追加到 FormData 对象中 formData.append('file',file) // 创建 xhr 对象 var xhr = new XMLHttpRequest() // 调用 open 函数,指定请求类型与URL地址。其中,请求类型必须为 POST xhr.open('POST', 'www.baidi.com') // 发起请求 xhr.send(fd) // 监听 xhr.upload 的 onprogress 事件 获取上传进度 xhr.upload.onprogress = function(e) { // e.lengthComputable 是一个布尔值,表示当前上传的资源是否具有可计算的长度 if (e.lengthComputable) { // Math.round() 进行四舍五入取整 因为上传时 网络等不确定因素可能会出现缺失小部分字节的情况 // e.loaded 已传输的字节 // e.total 需传输的总字节 var progress = Math.round((e.loaded / e.total) * 100) + '%' } } // 是否上传成功 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText) if (data.status === 200) { console.log('上传文件成功'); } } }2、axios(vue) // 上传函数(vue中) async uplaod() { // 创建 FormData 对象 var formData = new FormData(); // 将获得文件对象追加到 FormData 对象中 formData.append('file',file) try { // 暂存this对象 const that = this // 调用接口开始上传 await this.$axios.post(api.addfiles, formData, { // 实时获取上传进度 onUploadProgress (progressEvent) { // Math.round() 进行四舍五入取整 因为上传时 网络等不确定因素可能会出现缺失小部分字节的情况 // loaded 已传输的字节 // total 需传输的总字节 that.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%' } console.log('上传成功') } catch(error) { console.log('上传失败',error) }
本文链接地址:https://www.jiuchutong.com/zhishi/299341.html 转载请保留说明!

上一篇:Python二手房价格预测(三)——二手房价格预测模型baseline(2手房价格)

下一篇:自学黑客,一般人我劝你还是算了吧(自学黑客技术入门教程)

  • 华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

    华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

  • 钉钉群直播怎么共享屏幕(钉钉群直播怎么下载保存)

    钉钉群直播怎么共享屏幕(钉钉群直播怎么下载保存)

  • 微信二维码支付如何设置密码(微信二维码支付怎么取消密码)

    微信二维码支付如何设置密码(微信二维码支付怎么取消密码)

  • 为什么全民k歌有不认识的人评论(为什么全民k歌要vip)

    为什么全民k歌有不认识的人评论(为什么全民k歌要vip)

  • 闲鱼买家故意拒收可以不退吗(闲鱼买家故意拒绝签收)

    闲鱼买家故意拒收可以不退吗(闲鱼买家故意拒绝签收)

  • 笔记本花屏怎么回事(笔记本花屏怎么关机)

    笔记本花屏怎么回事(笔记本花屏怎么关机)

  • aoc显示器什么水平(aoc显示器进水怎么维修)

    aoc显示器什么水平(aoc显示器进水怎么维修)

  • 微信视频左右脸是反的(微信视频左右脸是反的怎么解决)

    微信视频左右脸是反的(微信视频左右脸是反的怎么解决)

  • 加密u盘和普通u盘有啥区别(加密u盘格式化还是加密u盘吗)

    加密u盘和普通u盘有啥区别(加密u盘格式化还是加密u盘吗)

  • 3990x用什么散热器(3990x用什么风冷)

    3990x用什么散热器(3990x用什么风冷)

  • 新手机耗电快正常吗(新手机消耗电快)

    新手机耗电快正常吗(新手机消耗电快)

  • 信号可划分哪些类型(信号可以分为哪几类)

    信号可划分哪些类型(信号可以分为哪几类)

  • window10的打印机在哪(window10的打印机如何设置)

    window10的打印机在哪(window10的打印机如何设置)

  • vivo视频电话怎么关闭(vivo视频电话怎么设置)

    vivo视频电话怎么关闭(vivo视频电话怎么设置)

  • 小米笔记本休眠怎么激活(小米笔记本休眠后无法开机)

    小米笔记本休眠怎么激活(小米笔记本休眠后无法开机)

  • 拼多多评价多久能显示(拼多多评价多久才会显示)

    拼多多评价多久能显示(拼多多评价多久才会显示)

  • 趣步3.1.1糖果怎么置换(趣步4.1.1糖果怎么置换)

    趣步3.1.1糖果怎么置换(趣步4.1.1糖果怎么置换)

  • mate30pro是2k屏吗(华为mate30pro有2k屏吗)

    mate30pro是2k屏吗(华为mate30pro有2k屏吗)

  • 金山文档微信怎么使用(金山文档微信怎么打不开)

    金山文档微信怎么使用(金山文档微信怎么打不开)

  • 华为p30有哪些功能(华为p30有哪些功能设置)

    华为p30有哪些功能(华为p30有哪些功能设置)

  • 怎样把相册里的照片拼在一起(怎样把相册里的图片合并在一起)

    怎样把相册里的照片拼在一起(怎样把相册里的图片合并在一起)

  • 如何使用触宝电话(触宝怎么用)

    如何使用触宝电话(触宝怎么用)

  • 专有钉钉H5微应用开发,个人总结,详细教程(钉钉h5微应用)

    专有钉钉H5微应用开发,个人总结,详细教程(钉钉h5微应用)

  • named-checkconf命令  named配置文件语法检查(named-config)

    named-checkconf命令 named配置文件语法检查(named-config)

  • 织梦dedecms5.7无法上传图片的解决方法(织梦停止更新了吗)

    织梦dedecms5.7无法上传图片的解决方法(织梦停止更新了吗)

  • 交强险必须交车船使用税吗?交多少钱?
  • 待抵扣进项税的账务处理
  • 甲供材料的增值税是多少
  • 居民个税和非居民个税哪个高
  • 个税申报表中的基本养老保险怎么填
  • 应付职工薪酬为什么不属于金融负债
  • 付境外公司佣金怎么做账
  • 500元以内的商品都有哪些
  • 企业所得税前可以扣除的项目
  • 补充医疗保险能自己交吗
  • 企业固定资产入账金额标准
  • 承付期满日怎么算
  • 去年12月份到现在有多少天了
  • 合伙企业需要交企业所得税吗?
  • 稳岗补贴需要交个税吗
  • 土地纳税申报表
  • 组合销售带来的收益
  • 既加工又有安装费的公司
  • 租税联动政策
  • 苹果手机zm
  • 配置足够但玩游戏卡顿
  • 定金算营业收入吗
  • 在线网速测试需要付费吗
  • linux命令有啥用
  • win10开机强制进入高级选项怎么退出
  • php destruct
  • bwkp.exe是什么程序
  • 路由器增强型
  • cookie验证和token验证的区别
  • 会计核算是什么岗位
  • 如果企业亏损要交企业所得税吗
  • 工程项目成本费用的分类有哪些?
  • 银行存款日记账可以采用
  • 对个别报表中处置收益的归属期间进行调整
  • 新办公司实收资本怎么查
  • 一天看小说十几个小时的人
  • vue打包成一个文件
  • 前端解决浏览器跨域问题
  • 增值税专用发票丢了怎么补救
  • 年终奖并入综合所得
  • 旋转 目标检测
  • 暂估入库的商品含税吗
  • php实现将base64格式图片保存在指定目录的方法
  • java泛型简单例子
  • 手把手的教
  • 享受小微企业免征增值税政策
  • 拓展训练属于培训费吗
  • 租赁店面没有发票违法吗
  • 经营性应收项目和经营性应付项目
  • 企业向个人借款利息如何缴纳增值税
  • 公司对自己内部的要求
  • 代扣车船税手续费按多少返还
  • 固定资产一次性扣除政策
  • sql server的go
  • 暂估入库账务处理举例
  • 信用减值损失如何列报
  • 以前年度损益调整借贷方向
  • 进度款开票是开实收金额吗
  • 跨月报销的算当月还是上个月的
  • 计提个人经营所得税怎么算
  • 青苗赔偿规定
  • 怎么理解核销
  • 公司车辆过户给个人有年限么
  • sql语句学习
  • mysql数据库性能
  • 数据库聚簇索引和非聚簇索引
  • windows8怎么用
  • Linux系统网络配置
  • dos下运行安装文件
  • win10 提示你的设备遇到问题 需要重新启动
  • linux开启关闭命令
  • win10系统语言包安装方法
  • unity通过脚本控制骨骼节点让模型动起来
  • nodejs 回调
  • vbs以管理员权限运行
  • javascript中window.event事件用法详解
  • android:padding="10dp"
  • 国税总局商品编码是什么
  • 开个小型外卖店要多少钱
  • 深圳布吉下水径旧改
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设