1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10. <center>
  11. <form action="" method="post" enctype="multipart/form-data">
  12. <img alt="" src="" id="ImgPr" style="width:100:px;height:150px;">
  13. <br>
  14. <input type="file" name="file" id="inputFile" onchange="checkimage()" >
  15. </form>
  16. <script type="text/javascript">
  17. //检查是否上传图片
  18. function checkimage(){
  19.      var f=document.getElementById("inputFile").value;
  20.      if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){
  21.          alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
  22.      }else{
  23.          previewFile();
  24.      }
  25. }
  26.  
  27. //图片预览功能
  28. function previewFile() {
  29.      var preview = document.getElementById("ImgPr");
  30.      var file  = document.querySelector('input[type=file]').files[0];
  31.      var reader = new FileReader();
  32.      reader.onloadend = function () {
  33.       preview.src = reader.result;
  34.      }
  35.      if (file) {
  36.       reader.readAsDataURL(file);
  37.      } else {
  38.       preview.src = "images/defaultImg.jpg";
  39.      }
  40. }
  41. </script>
  42. </center>
  43.  
  44. </body>
  45. </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. USB OTG插入检测识别

    转载请标注原文地址:http://blog.csdn.net/uranus_wm/article/details/9838847 一 USB引脚一般四根线,定义如下: 为支持OTG功能,mini/mi ...

  2. java web使用gradle配置详情

    博客说明:本片博客为FSSARB项目片面部分,目前项目还在更新中,请持续关注... 序言 项目构建工具从ant到maven,再到gradle,这是在严峻的技术考验下不停过度的结果.依照百度百科的阐述, ...

  3. linux的三种安装软件包的方式（小白的学习之旅）

    tar包,整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2) 解压缩文件:一般tar包,都会再做一次压缩,如gzip.bz2等,所以你需要先解压.如果是最常见的g ...

  4. PHP: 深入pack/unpack

    https://my.oschina.net/goal/blog/195749 PHP作为一门为web而生的服务器端开发语言,被越来越多的公司所采用.其中不乏大公司,如腾迅.盛大.淘米.新浪等.在对性 ...

  5. CentOS 7 Rescure

    之前从来没想过会在Linux系统中使用这个东西-- 今天系统无法启动了!!! 一.开机进度条卡住了.查看一下字符卡在哪里了? Starting MySQL Community Server... 就是 ...

  6. JQ完成表格单元格顺序的上移下调

    如有指教及疑问,欢迎留言 HTML代码 <table class="exampletable"> <thead> <tr> <th> ...

  7. IE11 iframe alternative

    <OBJECT classid=clsid:8856F961-340A-11D0-A96B-00C04FD705A2> <PARAM NAME=Location VALUE=http ...

  8. C#的四种Timer介绍

    一.Timer的几个类别 1.System.Threading.Timer 2.System.Timers.Timer 3.System.Windows.Forms.Timer 4.System.Wi ...

  9. Making my own Autonomous Robot in ROS / Gazebo, Day 1: Building the static model

    Day 1: Setting up ROS: Indigo OS: Ubuntu 14.04 OS: Gazebo 7.0.0 Initialize the workspace To create t ...

  10. Spring MVC静态资源处理

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...