js图片预览带进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
progress {
width: 168px;
height: 5px;
color: #f00;
background: #EFEFF4;
border-radius: 0.1rem;
} /* 表示总长度背景色 */
progress::-webkit-progress-bar {
background-color: #f2f2f2;
border-radius: 0.2rem;
} /* 表示已完成进度背景色 */
progress::-webkit-progress-value {
background: forestgreen;
border-radius: 0.2rem;
}
</style>
</head>
<body>
<input type="file" id="myFile"/>
<div id="bar">
上传进度:
<progress id="pro" value="0"></progress>
</div>
<div>
<img src="" alt="GG" id="myImg"/>
</div> </body>
<script src="../js/jquery.js"></script>
<script> var myFile = document.getElementById("myFile");
//绑定事件(ECMAScript6写法)
myFile.addEventListener("change", () => {
var file = myFile.files[0];
//toDataURL(file);
previewWithObjectURL(file);
}) //简单的图片预览建议使用第一种方式
//URL方式（第一种方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10
function previewWithObjectURL(file) {
var url = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
//请求完成后,显示图片
reader.onloadend = function (event) {
document.getElementById("myImg").src = url;
}
//上传过程中动态显示进度条
reader.onprogress = function (event) {
if (event.lengthComputable) {
document.getElementById("pro").value = event.loaded / event.total;
}
}
} //DataURL（第二种方式）src = data image/jpeg;base64,/hihfejaojshf24ji3h53i
function toDataURL(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
//请求完成后,显示图片
reader.onloadend = function (event) {
document.getElementById("myImg").src = event.target.result;
}
//上传过程中动态显示进度条
reader.onprogress = function (event) {
if (event.lengthComputable) {
document.getElementById("pro").value = event.loaded / event.total;
}
}
}
</script>
</html>
js图片预览带进度条的更多相关文章
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- js图片预览插件，不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- previewImage.js图片预览缩放保存插件
previewImage.js好用的图片预览缩放保存插件
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- js 图片预览
图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...
- MVC 图片上传 带进度条（转）
MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...
- js图片预览（一张图片预览）
核心思想:无论是一张图片上传还是多图上传,首先我们都需要先获得图片对象. 栗子: <inuput type="file" id="myfile" onch ...
- bootstarp 多图片上传 带进度条
前台代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- 一般处理程序、Ajax多图片上传带进度条
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <tit ...
随机推荐
- ASP.NET 静态化
以前也说过页面静态化 但是说的好像不清楚 这次我用一个插件 URLRewriter 重写URL 先引用dll 然后再web.config中三步走 <configSections> & ...
- Javascript节点选择
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...
- Django_01_创建图书管理项目
在django中,项目的组织结构为一个项目包含多个应用,一个应用对应一个业务模块 示例:创建项目的名称为test1,完成“图书-英雄”信息的维护,创建应用名称为booktest 创建项目:首先进入到虚 ...
- TCP 的三次握手和四次挥手，TCP 的流量控制和拥塞控制
70.TCP协议的三次握手与四次挥手70.1.TCP报文结构 1.源端口号:表示发送端端口号,字段长为16位. 2.目标端口号:表示接收端口号,字段长为16位. 3.序列号:表示发送数据的位置 ...
- Oracle 开窗函数--转
oracle的分析函数over 及开窗函数 转自:http://zonghl8006.blog.163.com/blog/static/4528311520083995931317/一:分析函数ove ...
- Hbuilder + MUI 的简单案例
话不多说 直接上代码 项目结构: index.html 的代码 <!DOCTYPE html><html> <head> <meta ch ...
- ubuntu NGINX uwsgi https 部署Django 遇到的问题
搞了3天终于把Django成功部署到Ubuntu,记录一下: 引用来自泡泡茶壶: Ubuntu下的Nginx + Uwsgi + Django项目部署详细流程 前提说明: Django作为小程序的后端 ...
- HDU 6107 - Typesetting | 2017 Multi-University Training Contest 6
比赛的时候一直念叨链表怎么加速,比完赛吃饭路上突然想到倍增- - /* HDU 6107 - Typesetting [ 尺取法, 倍增 ] | 2017 Multi-University Train ...
- ansible API 常用模块
常用模块 用于读取yaml,json格式的文件 from ansible.parsing.dataloader import DataLoader #用于管理变量的类,包括主机,组,扩展等变量 fro ...
- 【转】别人写的pe代码
// PEOperate.cpp: implementation of the PEOperate class. // //////////////////////////////////////// ...