<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.8.1.min.js" > </script>
    <script type="text/javascript">
// 获取本地上传的照片路径 
function getPath(obj) { 
          if (obj) { 
              //ie 
              if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
                  obj.select(); 
                  // IE下取得图片的本地路径 
                  return document.selection.createRange().text; 
              } 
              //firefox 
              else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
                  if (obj.files) { 
                      // Firefox下取得的是图片的数据 
                      return obj.files.item(0).getAsDataURL(); 
                  } 
                  return obj.value; 
              } 
              return obj.value; 
          } 
      } 
//显示图片
   
function previewPhoto(){ 
    var picsrc=getPath(document.all.fileid); 
    var picpreview=document.getElementById("preview"); 
    if(!picsrc){  
     return
    } 
    if(window.navigator.userAgent.indexOf("MSIE") >= 1) { 
         if(picpreview) { 
          try{ 
                 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc; 
                }catch(ex){ 
           alert("文件路径非法，请重新选择！") ; 
           return false; 
          } 
     }else{  
        picpreview.innerHTML="<img src='"+picsrc+"' />"; 
     } 
   } 
} 
   
   
   
function preImg(fileid, imgid) {
    if (typeof FileReader == 'undefined') {
        var picsrc=getPath(document.all.fileid)
        $("#imgid").attr({ src: picsrc});
        previewPhoto();
    }
    else{
    var reader = new FileReader();
    var name=$("#fileid").val();
    var picpreview=document.getElementById("preview"); 
    reader.onload = function(e) {
        var img = document.getElementById(imgid);
        //img.src = this.result;
        picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />"; 
    }
    reader.readAsDataURL(document.getElementById(fileid).files[0]);
}
}
   
  </script>
 </head>
 <body>
 <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;"> 
   
<input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>
 </body>
</html>

JS实现图片上传之前先预览的更多相关文章

  1. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

  2. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  3. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  4. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  5. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  6. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  7. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

  8. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. file图片上传之前先预览

    链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...

随机推荐

  1. 应输入 #endregion 指令报错的排查技巧

    VS2010中错误排查的一个小技巧,欢迎大家吐槽: 错误    9    应输入 #endregion 指令sses.cs    3778    2  xxx.xx   这个错很明显,是缺少#endr ...

  2. Android Studio 连接 逍遥模拟器

    1.启动 逍遥模拟器: 2.打开 Android Studio 项目: 3.命令行 adb connect 127.0.0.1:21503 C:\Users\Administrator>adb ...

  3. C# 随机数类

    using System; namespace DotNet.Utilities { /// <summary> /// BaseRandom /// 产生随机数 /// /// 随机数管 ...

  4. 二、socket编写简单BIO的HTTP服务器

    一.目标 诸如tomcat等web服务器中间件简化了我们web的开发成本,但有时候我们或许并不需要这么一个完备的服务器,只是希望做一个简单地处理或者做特殊用途的服务器. 本文将提供一个HTTP的服务器 ...

  5. 一、Java多线程基础

    一.简介 1.操作系统 在早起的裸机时代,计算机非常地昂贵,而且也没有操作系统的概念,计算机从头到尾只能执行一个程序.如果程序在执行一个耗时的操作,那么在这个过程中,计算机就有大量的资源闲置在那里,这 ...

  6. Java基础——面向对象

    Hello 大家好,我又来啦,今天我们来说说Java的面向对象. 还记得之前去面试几家公司的实习生职位,大部分面试官都问过我有关面向对象 的问题,不知道以后还会不会问,估计是不会了吧...(:3[▓▓ ...

  7. 类库项目如何既能支持netcore2.0,也能支持net4.5

    手动更改项目配置 .csporj 中的代码 <TargetFramework>netcoreapp2.</TargetFramework> 改成 <TargetFrame ...

  8. mySql连接报错

    问题: mySql链接报错如下: 解决: 设定时区 在链接URL增加?serverTimezone=UTC,变为jdbc:mysql://localhost:3306/TEST?serverTimez ...

  9. AJAX 概念 优势 发展前景 工作原理 底层技术 状态 缺点 框架

    1. 概念 Ajax asynchronous JavaScript and XML , 异步js和xml. 这种解释已经过时了, 现在ajax就是, 允许浏览器和服务器通信, 而无需刷新当前页面的技 ...

  10. java多线程中的死锁、活锁、饥饿、无锁都是什么鬼？

    死锁.活锁.饥饿是关于多线程是否活跃出现的运行阻塞障碍问题,如果线程出现了这三种情况,即线程不再活跃,不能再正常地执行下去了. 死锁 死锁是多线程中最差的一种情况,多个线程相互占用对方的资源的锁,而又 ...