<%@ 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. 动态规划（DP）

    一.基本概念 动态规划过程是:每次决策依赖于当前状态,又随即引起状态的转移.一个决策序列就是在变化的状态中产生出来的,所以,这种多阶段最优化决策解决问题的过程就称为动态规划. 二.基本思想与策略 基本 ...

  2. Boost学习笔记（二） 时间与日期

    timer库概述 timer库包含三个组件:分别是计时器类timer.progress_timer和进度指示类progress_display timer 主要作用是计时,精确度是毫秒级.下面是一个简 ...

  3. DbContext 那些事 —— 数据库初始化

    数据库初始化 上图,这个图解释了,数据库初始化的流程,是基于我们在上下文类中的构造函数中传递的参数. 在上面的图中,context类中的base构造器中,可以填入下面的参数: 无参数(No Param ...

  4. Kanzi编程基础3 - 图片读取与显示

    Kanzi开发的时候会遇到需要从外部读取图片的情况.Kanzi2.8版本和3.3版本读取方法稍有不同,我们先看看2.8版本的api. [2.8版本] 1)首先要从文件中读取一张图片 struct Kz ...

  5. Python进阶(三)--global和类属性

    global关键字 一句话概括为:告诉python解释器,global声明的变量为全局作用域内定义的变量.解释器就会到全局作用域内寻找global定义的变量. python的类属性 类属性相当于其他O ...

  6. 《与小卡特一起学Python》Code1

    print "I love pizza!" print "pizza " * 20 print "yum " * 40 print &quo ...

  7. 用Excel制作热图(heatmap)的方法

    http://jingyan.baidu.com/article/64d05a0240ec75de55f73bd8.html 利用Excel 2010及以上版本的"条件格式"--& ...

  8. 把数据输出到Word （组件形式）

    上一篇的文章中我们介绍了在不使用第三方组件的方式,多种数据输出出到 word的方式,最后我们也提到了不使用组件的弊端,就是复杂的word我们要提前设置模板.编码不易控制.循环输出数据更是难以控制.接下 ...

  9. Scrum Meeting 14-20151227

    说明 这几天我们代码人员一直在做数据库,没有来得及更新博客,从明天开始将会正常做scrum meeting,也将加快开发 工作,预计beta版本将会在12.30之前发布. 摘要 目前基本开发都已经做的 ...

  10. NodeJS 初体验

    console.log('%s: %d', 'Hello', 25);  // 可以像C语言格式一样输出//app.jsvar http = require('http');http.createSe ...