js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<form action="" method="post" enctype="multipart/form-data">
<img alt="" src="" id="ImgPr" style="width:100:px;height:150px;">
<br>
<input type="file" name="file" id="inputFile" onchange="checkimage()" >
</form>
<script type="text/javascript">
//检查是否上传图片
function checkimage(){
var f=document.getElementById("inputFile").value;
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
}else{
previewFile();
}
} //图片预览功能
function previewFile() {
var preview = document.getElementById("ImgPr");
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "images/defaultImg.jpg";
}
}
</script>
</center> </body>
</html>
js实现图片预览的更多相关文章
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
- JavaScript进阶(八)JS实现图片预览并导入服务器功能
JS实现导入文件功能 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...
随机推荐
- Oracle(创建序列)
概念: 所谓序列,在oracle中就是一个对象,这个对象用来提供一个有序的数据列,这个有序的数据列的值都不重复. 1.序列可以自动生成唯一值 2.是一个可以被共享的对象 3.典型的用来生成主键值的一个 ...
- HANA SQLScript
数据类型 日期时间类型 DATE(日期) DATE 数据类型由年.月.日信息组成,表示一个日期值. DATA 类型的默认格式为‘YYYY-MM-DD’. YYYY 表示年, MM 表示月而 DD 表示 ...
- AraxisMerge和beyond Compare做git mergetool配置
打开.gitconfig文件,加入如下代码即可 [diff] external = /Applications/AraxisMerge.app/Contents/Utilities/araxisgit ...
- WinForm中MouseEnter和MouseLeave混乱的问题
MouseEnter+MouseLeave不行,我用了MouseMove+MouseLeave,效果一样 最近做个聊天的系统,仿照qq的界面设计,像qq聊天界面中字体.表情.截图等图片,鼠标放上去显示 ...
- Java四种线程池
Java四种线程池newCachedThreadPool,newFixedThreadPool,newScheduledThreadPool,newSingleThreadExecutor 时间:20 ...
- Android开发之Git配置
Android开发之Git配置 1.首先git配置: 输入命令: git config --global user.name "xxx.xx" git config --globa ...
- Centos安装vsftp服务
1.安装vsftp yum install vsftpd 2.开启vsftp服务,设置开机自启 service vsftpd restart chkconfig vsftpd on 停止vsftpd: ...
- 常见的JavaScript函数
JavaScript函数一共可分为5类:常规函数.数组函数.日期函数.数学函数和字符串函数. (1)常规函数(9个) alert函数:显示一个警告对话框,包括一个“确定”按钮. confirm函数:显 ...
- url的内容及格式
url的内容及结构: url格式:
- jmeter for循环嵌套if学习1
测试计划组成: vcondition的值都是tom. 执行结果: