HTML页面上传图片直接预览
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<div class="yanzRight">
<input name="evidence" οnchange="uploadImg(this,'preview')" type="file"/>
<span class="dui" id="imgOrder_dui" style="display: none;"></span>
</div>
<div id="preview">
<img src="" alt="" id="imghead5" height="200" width="200" />
</div>
</body>
<script>
function uploadImg(file,imgNum){
var widthImg = 200; //显示图片的width
var heightImg = 200; //显示图片的height
var div = document.getElementById(imgNum);
if (file.files && file.files[0]){
div.innerHTML ='<img id="upImg">'; //生成图片
var img = document.getElementById('upImg'); //获得用户上传的图片节点
img.onload = function(){
img.width = widthImg;
img.height = heightImg;
}
var reader = new FileReader(); //判断图片是否加载完毕
reader.onload = function(evt){
if(reader.readyState === 2){ //加载完毕后赋值
img.src = evt.target.result;
}
}
reader.readAsDataURL(file.files[0]);
}
}
</script>
</html>
HTML页面上传图片直接预览相关推荐
- h5页面上传图片java_[Java教程]h5上传图片及预览_星空网
h5上传图片及预览 2016-04-22 0 第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需 ...
- javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览
1. 准备工作 因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源 使用express将pu ...
- python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
- 本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
- JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
- 2016/4/19 ①单个文件上传 ②上传图片后 预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
- Python excel转成html页面 excel 在线预览
Python excel转成html页面 excel 在线预览 因为这两天公司的项目要用到在浏览excel 所以就在做这个功能.一开始查了很多资料 都是各种不行,最后好不容易找到一些辅助资料 终于是今 ...
- jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列 谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必须引用jquery ...
- ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
最新文章
- Android中实现照片滑动时左右进出的动画的xml代码
- css工程化和浏览器兼容性问题
- iOS定时器-- NSTimer 和CADisplaylink
- 超低代码拓荒记 | 工业互联网新边疆
- Linux中的两个经典宏定义
- 餐巾（cogs 461）
- Node.js的集群功能以及在Express的配置
- java实现画笔的画圆与矩形功能_JAVA怎么画出一个任意大小的圆形和矩形
- 源码-PL/SQL从入门到精通-第二章-PL/SQL基本概念-Part 2
- 电大网络计算机绘图,计算机绘图与AUTOCAD设计[031005217]-中国大学mooc-题库零氪
- QGIS无人机数据分析教程
- 像素值与灰度值的区别与关系
- 锐捷DHCPV6配置
- SiamRPN++简述
- 苹果台式电脑怎么使用计算机,MAC电脑连接台式电脑显示器怎么操作
- 用python画星空-python3的turtle画模仿3d星空,运动的恒星小宇宙
- win10批量修改文件扩展名
- NEO4J环境变量设置及其安装使用
- 50首最好听的英文歌
- 微软CEO鲍尔默失策太多次 应只拿1美元年薪