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({ ...
最新文章
- JSP与ASP的比较
- 搞机器学习的人，必须要知道的大牛都有谁？
- FormData上传文件同时附带其他参数
- 如何估算深度神经网络的最优学习率
- 关于php语言的使用！
- mysql开发问题解决_开发过程中mysql常见问题的解决方法
- 华为鸿蒙osbeta在哪看发布会,重磅消息！华为在发布鸿蒙OS2.0手机beta版本后，又发布搭载鸿蒙的新品！！...
- Map 集合循环、遍历的 四 种方式
- 全网最细之static关键字讲解
- java语言 爱我,语言篇：Java环境
- 轻松获得网通、电信、铁通IP地址分配段
- 用浏览器怎样监控网页内容变化
- 解决Vue 2.0在IE11版本浏览器中的兼容性问题
- 安鑫 十年资产翻十倍 普通人是怎么做到的
- 图像识别利用计算机对图像进行,图像识别方法
- 设置来电铃声、卡2来电铃声、短信铃声、提示铃声、闹铃铃声
- 帝国cms php替换,帝国cms怎么替换网址域名
- 领英不能加人怎么办？
- 游戏时弹出内存不能为read的提示框
- Python项目实战：绕圈圈面试题