<%@ 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 ...
-
Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
-
JavaScript进阶(八)JS实现图片预览并导入服务器功能
JS实现导入文件功能 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...
-
纯JS实现图片预览与等比例缩放和居中
最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...
随机推荐
-
[C语言入门笔记]分支结构与数组
分支结构与数组 什么是分支结构? 分支结构是用户或者程序可以选择下一步执行哪个语句 分支结构有哪些? If If Else If Else If Switch 在初学者的学习过程中第一种和第二种比较普 ...
-
Snort - manual 笔记（四）
1.7 Basic Output Snort可以做很多任务, 并且在任务完成后输出很多有用的统计信息. 一些不用说明就可以看懂, 其他的总结在这里, 不过只是一些基本的 1.7.1 Timing St ...
-
JS 获取自定义标签
<abc-aaa xwe='sdf'>AAAAAAAAAAAAAAAAAAAAAA</abc-aaa> alert($("abc-aaa").attr(&q ...
-
Linux电源管理(11)_Runtime PM之功能描述
转自:http://www.wowotech.net/pm_subsystem/rpm_overview.html 1. 前言 终于可以写Runtime PM(后面简称RPM)了,说实话,蜗蜗有点小激 ...
-
C# 中使用WebClient 请求 https
WebClient 请求 启用SSL的站点 时,如果站点的证书是不可信的,请求会被阻止,解决办法如下: 添加以下代码: ServicePointManager.ServerCertificateVal ...
-
Ubuntu下安装最新sublime
1. Install the GPG key: wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key ...
-
验证IP地址的有效性
实力说明 IP地址是网络上每台计算机的标识,在浏览器中输入的网址也是要经过DNS服务器转换为IP地址才能找到服务器. 关键技术 正则表达式
-
vue搭建脚手架
1.检查npm -v有版本提示成功即可2.npm install vue-cli -g //全局安装3.vue -V 查看版本号(我这边安装的是2.9.6,V大写)4.vue init webpack ...
-
【JMeter】教程及技巧汇总(转载）
转载地址:http://www.hissummer.com/jmeter-summary.html 参考/学习资料:http://www.yiibai.com/jmeter/jmeter_build_ ...
-
AT2364 Colorful Balls
AT2364 Colorful Balls 题意翻译 N个球排成一排,第i个球有颜色ci和重量wi. Snuke每次可以选择两个颜色相同,且重量之和不超过X的球,交换他们的位置. Snuke每次可以选 ...