<%@ 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实现图片预览的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  7. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  8. Jquery OR Js 实现图片预览

    Jquery方法一: <!DOCTYPE html> <html> <head>     <title></title>     <s ...

  9. JavaScript进阶(八)JS实现图片预览并导入服务器功能

    JS实现导入文件功能       赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿 ...

随机推荐

  1. iOS Library not loaded: Reason: image not found

    iOS Library not loaded: ReactiveCocoa.framework ...Reason: image not found 解决办法:BuildPhases中,将对应的框架的 ...

  2. yum安装命令的使用方法

    yum安装常用软件的命令 #yum check-update #yum remove 软件包名 #yum install 软件包名 #yum update 软件包名 yum命令常见使用方法 yum - ...

  3. NFS服务器+客户端配置

    NFS:Network File System 使用NFS需要启用RPC(remoteprocedure call),RPC可以指定每个NFS功能所对应的端口号,重启RPC后,RPC所管理的所有NFS ...

  4. 如何将推送证书p12导出为pem

    1. 在Mac上启动Keychain助手,然后在login keychain中选择 Certificates分类.你将看到一个可展开的“Apple Development Push Services” ...

  5. 【树莓派】关于tinyproxy问题处理

    一.tinyproxy服务启动问题解决 在配置好树莓派的设备上,发现 tinyproxy 启动时候存在问题,如下图: 经过半天的折腾,后来发现原来是由于异常关机导致临时文件生成错误 解决办法:删除/t ...

  6. Java集合常用类特点整理

    集合的结构如下图所示: 集合的两个顶级接口分别为:Collection和Map Collection下有两个比较常用的接口分别是List(列表)和Set(集),其中List可以存储重复元素,元素是有序 ...

  7. 易货Beta版本发布说明

    说明 由于前几天确实比较忙,所以没来得及写发布说明. 功能 我们在beta版本主要加入了以下几个功能: 一:增加了用户的发布界面 二:增加了用户的购买界面 三:使用下拉刷新取代了之前的handler后 ...

  8. Win7快速启动栏

    http://jingyan.baidu.com/article/456c463bbc1d140a583144cf.html 1. 在任务栏上右键 -> 工具栏 -> 新建工具栏.   在 ...

  9. 28. Implement strStr()

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...

  10. 如何选择 compileSdkVersion, minSdkVersion 和 targetSdkVersion

    对这几个概念模模糊糊,看到一篇文章就记录下来. 当你发布一个应用之后,(取决于具体的发布时间)可能没过几个月 Android 系统就发布了一个新版本.这对你的应用意味着什么,所有东西都不能用了?别担心 ...