JavaScript实现预览本地上传图片
<html> <head>
<title>
www.jb51.net图片上传预览
</title>
<script>
function PreviewImage(imgFile) {
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
if (!pattern.test(imgFile.value)) {
alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片!");
imgFile.focus()
} else {
var path;
if (document.all) {
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML = "";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"
} else {
path = URL.createObjectURL(imgFile.files[0]);
document.getElementById("imgPreview").innerHTML = "<img src='" + path + "'/>"
}
}
}
</script>
</head> <body>
<div>
<input type="file" onchange='PreviewImage(this)' />
<div id="imgPreview" style='width: 500px; height: 400px;'>
<img src="" />
</div>
</div>
</body> </html>
JavaScript实现预览本地上传图片的更多相关文章
- es5预览本地文件、es6练习代码演示案例
es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...
- javascript编辑器预览模式解密
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js:s上次预览,上传图片预览,图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE7+ 浏览器兼容预览本地图片
css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...
- vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用
思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...
- 如何在手机上预览本地h5页面
很简洁的一个方法: 1.安装nodeJS环境 2.在当前所在项目文件夹下输入命令: npm install anywhere -g3.输入命令: anywhere,即可在浏览器以本机ip地址为域名,自 ...
- JavaScript图片预览
预览选中的图片文件 jQuery $("#selectImage").change(function(){ $("#image").attr("src ...
- 手机预览本地html
下载nginx,地址http://nginx.org/en/docs/windows.html 解压后替换html中内容即可 在浏览器输入http://localhost/即可预览 或者换成ip ...
随机推荐
- 小程序获取formid配置模板消息
小程序无限获取formid,发送模板信息 1.发送模板信息需要条件:formid 2.formid产生环境:提交form表单产生,并且只有真机才能出现————安卓一个13位的时间戳(近期使用得时候,安 ...
- 【MySql】update用法
update 语句可用来修改表中的数据, 简单来说基本的使用形式为: update 表名称 set 列名称=新值 where 更新条件; 以下是在表 students 中的实例: 将 id 为 5 的 ...
- 九.LNMP网站架构实践部署
期中集群架构-第九章-期中架构LNMP章节====================================================================== 01. LNMP ...
- Spring Boot MongoDB 查询操作 (BasicQuery ,BSON)
MongoDB 查询有四种方式:Query,TextQuery,BasicQuery 和 Bson ,网上太多关于 Query 的查询方式,本文只记录 BasicQuery和Bson 的方式,Basi ...
- selenium执行JavaScript语句:控制滚动条 聚焦元素 改变下拉选项
1. 执行js脚本 控制滚动条 # http://www.cnblogs.com/yoyoketang/p/6128655.html In [347]: js = "window.scrol ...
- TopCoder SRM500 Div1 250 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/SRM500-250.html SRM500 Div1 250 题意 (看题用了半个小时--) 有 n 个人(编号 ...
- P4147 玉蟾宫 二维DP 悬线法
题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...
- 15,EasyNetQ-高级API
EasyNetQ的使命是为基于RabbitMQ的消息传递提供最简单的API. 核心IBus接口有意避免公开AMQP概念,如交换,绑定和队列,而是实现基于消息类型的默认交换绑定队列拓扑. 对于某些场景, ...
- Springboot中使用Scheduled做定时任务
在开发中,定时任务是常见的功能,在spring boot 下开发定时任务其实很简单,具体代码如下: 1.配置依赖包pom.xml 由于默认的maven仓库经常访问不了,这里采用了阿里云的maven仓库 ...
- [深度学习入门]batch_size的意义
转自->https://www.zhihu.com/question/32673260