<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. Esper简介

    1. CEP(Complex Event Processing, 复杂事件处理) 事件(Event)一般情况下指的是一个系统中正在发生的事,事件可能发生在系统的各个层面上,它可以是某个动作,例如客户下 ...

  2. Postgresql 连接更新

    update dbo.m_role_fun a set role_code = b.rsc from (select rsc, fun_code from dbo.m_fun) b where a.f ...

  3. [转]OData and Authentication – Part 6 – Custom Basic Authentication

    本文转自:https://blogs.msdn.microsoft.com/astoriateam/2010/07/21/odata-and-authentication-part-6-custom- ...

  4. 引入第三方js文件，报错

    错误:Mixed Content: The page at 'https://localhost:44336/MENU' was loaded over HTTPS, but requested an ...

  5. Cheatsheet: 2017 07.01 ~ 07.31

    Other 8 Key Application Performance Metrics & How to Measure Them The Code Review: The Most Impo ...

  6. [PHP] PHP数组的实现哈希表(HashTable)结构

    PHP中使用最为频繁的数据类型非字符串和数组莫属,使用哈希表实现的PHP数组.1.数据结构:保存哈希表容器,保存数据的容器2.哈希函数实现:需要尽可能的将不同的key映射到不同的槽(bucket)中, ...

  7. docker启动容器报错：IPv4 forwarding is disabled. Networking will not work

    报这个错误会导致宿主机以外的pc 访问不了容器 按照网上的解决办法: 在/usr/lib/sysctl.d/00-system.conf文件后加net.ipv4.ip_forward=1 即可 然后重 ...

  8. Spring cloud Zuul网关异常处理

    Spring cloud Zuul网关异常处理 一 异常测试: 1> 创建一个pre类型的过滤器,并在该过滤器的run方法实现中抛出一个异常.比如下面的实现,在run方法中调用的doSometh ...

  9. <!DOCTYPE> 标签是什么

    DOCTYPE 标签,是html文档的类型声明(document type declaration,所谓声明,也就是宣称我他妈是谁),用来告诉浏览器,使用什么样的文档类型定义(Document Typ ...

  10. Android 黑色样式menu

    效果图: