<%@ 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. c语言简易文法

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  2. s5pv210启动debian出错提示bash: cannot set terminal process group (-1): Inappropriate ioctl for device

    1.启动参数如下: bootargs=root=/dev/nfs nfsroot=192.168.1.8:/opt/wheezy_fs ip=192.168.1.9:192.168.1.8:192.1 ...

  3. iphone中 input圆角bug

    今天写了个简单的登录注册,在电脑手机(除了iphone)样式都没有问题,但在iphone中却出现了异常,提交的按钮变成圆角被背景渐变的效果,随后又测试两个iphone版都是一个样,断定应该是safar ...

  4. 单据UI界面设计开发

    1.新建单据界面数据 2.创建数据模型,包括单据.单据行.设置应用缺省特性,每个模型树下只有一个红色项 3.新增动作,系统默认没有弃审支作按钮事件 4. 新增UI Form,选择对应的模型树及表单类别 ...

  5. Xcode7 模拟器安装app (转)

    本文转自同事zz的博客http://archerzz.cn/ios/xcode-install-app.html 原由 很多时候,为了学习了解别人的app,很多时候我们是直接拿别人的app安装在自己的 ...

  6. angular 路由请求js文件

    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.3.2/an ...

  7. javascript学习内容--改变样式、取消设置、显示内容、隐藏内容

    <head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...

  8. Linux 的文本处理命令一览

    grep 基于关键字搜索文本内容 -i 搜索时忽略大小写-n 显示结果所在行数-v 输出不带关键字的行-Ax 在输出的时候包含结果所在行之后的指定行数(x为一个数值,表示输出后面x行)-Bx 在输出的 ...

  9. Evolutionary Computing: multi-objective optimisation

    1. What is multi-objective optimisation [wikipedia]: Multi-objective optimization (also known as mul ...

  10. Mensa Intellect test

      国际标准智商测试                             (智力测试) 例题: 第一:看似简单的加法乘法数学题,10个人有9个都不会做. 第二:问号处应该填写什么数字?10个人有8 ...