<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. （二）JNI方法总结

    整个网上就没看到一个关于JNI好点的文档,干脆自己写一份,以方便以后使用的时候查阅 1. 类操作 DefineClass jclass DefineClass(JNIEnv *env, jobject ...

  2. ios碎片小记

    一.UIImageView 1.图片形状设为圆形时可能会由于图片的宽高比例导致显示出来的效果不是圆形 解决:设置UIImageView的contentMode为UIViewContentModeSca ...

  3. javascript图形动画设计--画简单正弦波

        <!doctype html> <html> <head> <meta charset="utf-8"> <title ...

  4. 撩课-Web大前端每天5道面试题-Day3

    1. javascript的typeof返回哪些数据类型? 答案: undefined string boolean number symbol(ES6) Object Function 2. 列举3 ...

  5. HTTP的response code 1xx，2xx，3xx，4xx，5xx分别代表什么

    HTTP 状态码点击链接可了解详情.您也可以访问 HTTP 状态码上的 W3C 页获取更多信息. 1xx(临时响应):表示临时响应并需要请求者继续执行操作的状态码. 2xx (成功):表示成功处理了请 ...

  6. 【C++并发实战】（三） std::future和std::promise

    std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...

  7. High Performance MySQL笔记：count

    在SQL中使用count()好像是非常自然的事情: SELECT COUNT(*) FROM TABLE_NAME; 有时候确实会想过,count(*)和单独的count(column_name)有什 ...

  8. BestCoder Round #93

    这么快两天就过去了啊……昨天是April Fool’s Day,但绝对是我过的所有April Fool’s Day里最没意思的一个…… 估计再不写就要忘了……还是写写吧= = 说好7:00到机房,然而 ...

  9. a标签无法正确下载数据

    场景:做下载二维码功能,使用了a标签+download属性,在使用一段时候后,突然有一个数据下载时候无法识别文件格式,以前都是png下载 原因:因为download="文件名"这里 ...

  10. 【Html基础】之<h1>~<h6> <p> <br> <hr>

    学习html无从下手,就在w3school的html手册按着教程学习了下. 什么是html? html是指超文本标记语言,即Hyper Text Markup Language html不是一种编程语 ...