H5上传图片,并且显示进度条
2023-09-11 14:21:35 时间
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> function showPreview(source) { var file = source.files[0]; if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById("portrait").src = e.target.result; }; fr.readAsDataURL(file); } } window.onload=function () { var h = { init: function() { var me = this; document.getElementById('File').onchange = me.fileHandler; document.getElementById('Abort').onclick = me.abortHandler; me.status = document.getElementById('Status'); me.progress = document.getElementById('Progress'); me.percent = document.getElementById('Percent'); me.loaded = 0; //每次读取1M me.step = 1024 * 1024; me.times = 0; }, fileHandler: function(e) { var me = h; var file = me.file = this.files[0]; var reader = me.reader = new FileReader(); // me.total = file.size; reader.onloadstart = me.onLoadStart; reader.onprogress = me.onProgress; reader.onabort = me.onAbort; reader.onerror = me.onerror; reader.onload = me.onLoad; reader.onloadend = me.onLoadEnd; //读取第一块 me.readBlob(file, 0); }, onLoadStart: function() { var me = h; }, onProgress: function(e) { var me = h; me.loaded += e.loaded; //更新进度条 me.progress.value = (me.loaded / me.total) * 100; }, onAbort: function() { var me = h; }, onError: function() { var me = h; }, onLoad: function() { var me = h; if(me.loaded < me.total) { me.readBlob(me.loaded); } else { me.loaded = me.total; } }, onLoadEnd: function() { var me = h; }, readBlob: function(start) { var me = h; var blob, file = me.file; me.times += 1; if(file.webkitSlice) { blob = file.webkitSlice(start, start + me.step + 1); } else if(file.mozSlice) { blob = file.mozSlice(start, start + me.step + 1); }else if(file.slice) { blob = file.slice(start, start + me.step + 1); } me.reader.readAsText(blob); }, abortHandler: function() { var me = h; if(me.reader) { me.reader.abort(); } } }; h.init(); } </script> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" width="70" height="75"> <form> <fieldset> <legend>分度读取文件:</legend> <input type="file" id="File" /> <input type="button" value="中断" id="Abort" /> <p> <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress> </p> <p id="Status"></p> </fieldset> </form> </body> </html>
相关文章
- H5项目常见问题汇总及解决方案
- Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间,Vue.js Nuxt.js 通用公众号页面解决方案(超级详细教程)
- uni-app - H5 页面路由不存在时,跳转到自己定制的 404.vue 页面(当路由不存在时自动重定向到自定义的 404 组件)超详细简约高效的解决方案
- uniapp - 超详细 H5 网站接入国家 “天地图“ 完整流程,提供显示地图、IP 属地定位 / 用户定位的城市名称、用户定位的经纬度等超多功能(可复制运行示例代码,详细注释及常见问题)
- uni-app - 头像图片裁剪组件(支持多种裁剪,手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化)全端完美兼容 H5 App 小程序,最好用的图片上传后裁剪插件教程源代码
- uni-app - 用户点击图像放大预览功能 / 支持左右滑动与手指手势放大缩小图片(支持单图与多图、实现手机查看大图全屏预览功能),类似微信查看图片的效果,支持 App、H5、小程序等全端兼容!
- [号外] 2015年度H5数据报告出炉!100万个H5里总结的经验!
- 移动端 H5 实现拍照功能的几种方法
- 【H5】视频播放
- web组件发消息给H5页面时报错
- H5快应用国际化
- 教你一招H5快应用快速回到首页
- 钉钉H5免登陆
- H5图片防盗链处理
- 小程序和H5互调
- 基于Vue + Vant + Axios+MySQL实现 H5 移动端完整商城【100010414】
- 基于Springboot+Vue+H5实现MiniTalk聊天APP
- 原生JS实现的h5小游戏-植物大战僵尸
- iOS与H5交互
- iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择
- 移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
- uniapp h5 使用JSAPI微信支付 当前页面的URL未注册 刷新页面后支付正常
- H5下拉刷新和上拉加载实现原理浅析
- 移动端H5实现图片上传
- HTML5_嵌套移动APP端的H5页面meta标签
- 常见工作场景解决方案开源库推荐:文件上传库 - uppy、图片处理库 - tui.image-editor、在线文档预览解决方案 - kkFileView、纯前端在线表格/协同编辑解决方案 - Luckysheet、表单设计器 - form-generator / form-render、H5在线网页设计器 - gods-pen / luban-h5
- H5应用转换快应用
- H5中对history栈的操作
- Caffe下LMDB与H5数据读取代码实现分析