function getPath()
{
  //判断浏览器
  var Sys = {};
  var obj = document.getElementById("headImg");
  var viewer = document.getElementById("viewImg");
  var ua = navigator.userAgent.toLowerCase();
  var s;
  (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
  (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
  (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
  (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
  (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
  var path="";
  if(Sys.ie<="6.0"){
    //ie5.5,ie6.0
    viewer.src = obj.value;
  }else if(Sys.ie>="7.0"){
    //ie7,ie8
    obj.select();
    //加上这一句防止报告安全问题
    obj.blur();
    viewer.src = document.selection.createRange().text;
  }else if(Sys.firefox){
    if (obj.files) {
        var accept = ["image/png","image/jpeg","image/jpg","image/gif"];
        if (accept.indexOf(obj.files[0].type) > -1) {
            var reader = new FileReader();
            reader.readAsDataURL(obj.files[0]);
            //延迟一会等待文件读取完毕
            var t = setTimeout(function(){
            viewer.src = reader.result;
            clearTimeout(t);
            },100)
        }
    }
    else
    {
        viewer.src = obj.value;
    }
  }else if(Sys.chrome){
    viewer.src = obj.value;
  }
}

<form>
<input type="file" id="headImg" />
<input id="btnOk" type="button" value="ok" onclick="getPath()"/>
<img src="http://blog.163.com/zhchf_52@yeah/blog/" alt="view" id="viewImg" />
</form>

由于IE9不能实时的显示图片,所以采用滤镜的方法:
<style type="text/css">
#viewImg2{ /* 该对象用于在IE下显示预览图片 */    
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);    
 width:150px;
 height:150px;
 display:none;
 overflow: hidden;
}    
#viewImg{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */    
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);   
  width:150px;
  height:150px;
  display:none;
  overflow:hidden;
}
</style>

<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" id="headImg" onchange="view()" name="headImg"/>
<input type="submit" value="保存" id="btnSave" disabled="disabled" />
<p class="lineH30 color6">建议使用正方形的图片,支持JPG、GIF、PNG格式,100K以内。</p>
<div id="viewImg2"></div>
<img src="http://blog.163.com/zhchf_52@yeah/blog/" alt="" id="viewImg"/>
<script type="text/javascript">
    //file文件控件,viewer 图像查看,accept支持的文件格式的mimetype数组
    function viewImage(file, viewer, viewer2, btn, accept) {
        //判断浏览器
        var Sys = {};
        if (file && viewer) {
            if (!viewer2) {
                viewer2 = viewer;
            }
            if (!accept || accept.length == 0) {
                accept = ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/bmp"];
            }
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
            (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
            (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
            (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            var path = "";
            if (Sys.ie) {
                viewer.style.display = "none";
                if (Sys.ie <= "6.0") {
                    //ie5.5,ie6.0
                    path = file.value;

}
                else if (Sys.ie >= "7.0") {
                    //ie7,ie8
                    file.select();
                    //加上这一句防止报告安全问题
                    file.blur();
                    path = document.selection.createRange().text;
                }
                v = isValidImage(path, accept);
                if (v) {
                    viewer2.style.display = "block";
                    if (viewer2.filters) {
                        viewer2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
                    }
                    else {
                        viewer2.src = path;
                    }
                }
            }
            else if (Sys.firefox) {
                viewer2.style.display = "none";
                viewer.style.display = "block";
                if (file.files && file.files.length > 0) {
                    if (accept.indexOf(file.files[0].type) > -1) {
                        var reader = new FileReader();
                        reader.readAsDataURL(file.files[0]);
                        //延迟一会等待文件读取完毕
                        var t = setTimeout(function () {
                            viewer.src = reader.result;
                            clearTimeout(t);
                        }, 100);
                        v = true;
                    }
                }
                else {
                    path = file.value;
                    v = isValidImage(path, accept);
                    if (v) {
                        viewer.src = file.value;
                    }
                }
            }
            else {
                viewer2.style.display = "none";
                viewer.style.display = "block";
                path = file.value;
                v = isValidImage(path, accept);
                if (v) {
                    viewer.src = file.value;
                }
            }

if (v) {
                if (btn) {
                    $("#" + btn).removeAttr("disabled");
                }
            }
            else {
                viewer.src="http://blog.163.com/zhchf_52@yeah/blog/";
                $("#btnSave").attr("disabled", "disabled");
            }
        }
    }
    //是否为有效的图片格式
    function isValidImage(path, accept) {
        var v = false;
        if (path
        && path.length > 0
        && path.indexOf(".") > 0
        && accept
        && accept.length > 0) {
            var idx = path.lastIndexOf(".") + 1;
            if (path.length > idx) {
                var ext = path.substr(idx).toLowerCase();
                for (var i = 0; i < accept.length; i++) {
                    if (accept[i].indexOf("/" + ext) > 0) {
                        v = true;
                        break;
                    }
                }
            }
        }
        return v;
    }

function autoSizePreview(objPre, originalWidth, originalHeight) {
        var zoomParam = clacImgZoomParam(150, 150, originalWidth, originalHeight);
        objPre.style.width = zoomParam.width + 'px';
        objPre.style.height = zoomParam.height + 'px';
        objPre.style.marginTop = zoomParam.top + 'px';
        objPre.style.marginLeft = zoomParam.left + 'px';
    }

function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = { width: width, height: height, top: 0, left: 0 };

if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = height / rateWidth;
            } else {
                param.width = width / rateHeight;
                param.height = maxHeight;
            }
        }

param.left = (maxWidth - param.width) / 2;
        param.top = (maxHeight - param.height) / 2;

return param;
    }

function view() {
        viewImage(document.getElementById("headImg"),
        document.getElementById("viewImg"),
        document.getElementById("viewImg2"),
        "btnSave",
        accept);
    }
</script>
</form>

js获取input file完整路径的方法的更多相关文章

  1. js 获取input file路径改变图像地址

    html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...

  2. js获取input file路径改变图像地址

    版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...

  3. js获取 input file 图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js 获取 input file 文件 附给 image src

    var a=document.querySelector('input[type=file]'); a.onchange = function (e) { //var reader = new Fil ...

  5. js获取input file文件二进制码

    <html> <body> <img id="image"src=""/> <br/> <input ty ...

  6. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  7. js清空input file的值

    原文:js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img ...

  8. javascript中外部js文件取得自身完整路径得办法

    原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...

  9. JS获取fileupload文件全路径

    来自:http://hi.baidu.com/libos88/item/c61ab8bae472afe34ec7fdfb 最近在写个小网站,用到了fileupload控件来上传文件.因为程序的某些需要 ...

随机推荐

  1. 解決 IE10 浏览器无法使用 ASP.NET From 验证登录的问题

    最近应项目用到ASP.Net表单验证机制(FormsAuthentication),来判断用户是否已经登录,一切测试顺利,最后发布到IIS中后在IE10测试是发现始终判断用户没登录(其他浏览器一切正常 ...

  2. HTML7常用的类型刮刮乐 光棒效果

    常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数   2.日期 ...

  3. hdu2243考研路茫茫——单词情结

    Problem Description 背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如&q ...

  4. mysql优化方案总结

    u       Mysql数据库的优化技术 对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引u ...

  5. CSS中字体尺寸总结

    下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...

  6. 轻松搞定javascript原型链 _proto_

    //如有错误或不同观点,欢迎批评与讨论! 首先,prototype出现的目的,是为了解决 代码重用 的问题 , prototype 相当于是在内存上划分出一个公共的区域, 专用于存放 实例化对象 的相 ...

  7. PhpStorm 4.0 & 5.0 部署本地Web应用

    1.创建新的项目(project),创建完成之后单击工具栏的应用运行/调试(Select Run/Debug Configuration)的下拉菜单弹出 Edit Cofigurations选项,单击 ...

  8. 论山寨手机与Android 【12】3G时代SmartPhone BP部分

    最成熟的3G网络系统,是3GPP项目组制订的WCDMA.WCDMA的网络结构,可参考Figure 12.1,其中有几个特点. 1. 反向兼容GSM/GRPS网络. 原有GSM网络的基站子系统(BSS) ...

  9. Java_SSH项目主要步骤记录

    建立Spring-Struts-Hibernate的步骤整理 1. 建立web project 2. 建立hernate, action, service包 3. 右击项目,add myeclipse ...

  10. WEB网站前端性能分析相关

    现在的网站分析工具,数据源主要有两种,分别是服务器日志(WebServer Log)和采集日志 买 优化要根据具体的业务和场景来分析 埋点:监控用户点击的每一步