<%@ 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. elasticsearch 初学 笔记（1）

    使用 curl进行数据的的格式, 1.下载curl,配置路径 格式 C:\Users\Administrator>curl -XPUT http://localhost:9200/dept/em ...

  2. dll的导入库(lib)输出路径

    创建动态链接库项目A, 它会生成:dll, lib, exp 等,其中 lib & exp 生成的路径设置在:[Linker]->[All Options]->[Import Li ...

  3. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  4. gdb调试基本命令（常用）

    gdb调试命令 1>. 启动gdb gdb 可执行程序的名字 2>. 查看代码 l -- 查看当前文件 -- 默认main函数 2. 查看其它文件: l 文件名:行号, 显示指定行号的上下 ...

  5. 【Java】变量类接口_学习笔记

    变量.类和接口 1.变量的类型 实例变量(不以static修饰) 成员变量 类变量(以static修饰) 所有变量 形参(方法签名中定义的变量) 局部变量         方法局部变量(在方法内定义) ...

  6. 在web.xml注册applicationContext.xml配置文件

    概要: Spring配置文件是集成了Spring框架的项目的核心,引擎的开始是:容器先是加载web.xml,接着是applicationContext.xml在web.xml里的注册.以下我们将介绍a ...

  7. 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  8. 关于《hibernate多对多》有中间表的建立

    角色 与 菜单(资源)的多对多关系,在这里我们建立中间表,用两个oneToMany实现 实体类: 角色(GmRole)  菜单(GmMenu) 中间表(GmRoleRight) 1.在角色实体中 pa ...

  9. DFA敏感词过滤

    import java.io.UnsupportedEncodingException; import java.nio.ByteBuffer; import java.util.ArrayList; ...

  10. 【Javascript】重新绑定默认事件

    更多内容,请移步 JSCON-简时空 在有一种场景下,你想先屏蔽掉默认的系统事件,而在特定条件下又重新绑定回去. [场景]H5页面,动画欢迎界面,共6帧:想在前5帧中屏蔽掉默认的touchmove事件 ...