（2014.11.25 最后更新）

一、碎碎念：关于访问本地图片的路径的问题，比较典型的例子就是上传头像。在以往的解决办法中，我们大多是先将图片上传到服务器然后从服务器返回图片，显示在页面上以达到预览的效果。那到底有没有办法从前端解决这个问题呢？网上也有一些从前端解决的文章，大家的办法都差不多，但是应用到项目中的时候，没有成功过。于是，现在的解决办法是我在前人的基础上进行的改造，希望大家多多提建议和想法，互相学习。

二、上传头像预览

1、首先做好准备工作:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="textml; charset=utf-8" />

<title>上传头像</title>

<script type="text/javascript" src="jquery.min.js"></script>

<style type="text/css">

.z{

    border:1px solid #ccc;

    padding:10px;

    margin-bottom: 30px;

    height: 142px;

    line-height: 142px;

}

.z img{

    width:100%;

}

.zd{

    display:none;

}

#con{

    width:200px;

    margin:0 auto;

}

</style>

</head>

<body>

<div id="con">

    <div class="z">

        <img id="zy_1" src="4.jpg">

    </div>

    <input id="input" type="file"/>

</div>

</body>

<html>

我做了一个小的页面，页面元素也很简单，给相应的元素加了样式。

效果如图：

haha，用了我喜欢的动漫做封面~~呐，现在我们可以开始写js部分了。

根据前辈们的总结以及经验，有了以下方法：

<script type="text/javascript">

function readURL(input) {

    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {

            $('#zy_1').removeAttr('src');

            $('#zy_1').attr('src', e.target.result);

        };

        reader.readAsDataURL(input.files[0]);

    }else{

        var pic_url = getPath(input);

        document.getElementById("zy_1").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";

    }

}

function getPath(obj){

  if(obj){

    if (window.navigator.userAgent.indexOf("MSIE")>=1){

        obj.select();

        obj.blur();

        return document.selection.createRange().text;

    }

  }

}

$(function(){

    $("#input").change(function(){

        readURL(this);

    });

});

</script>

是不是觉得看的云里雾里的？没关系，我也是这种想法，但是有一点我们一定要清楚，就是我做红色标记的地方。这个就好像我们在用一款插件，我们没必要去了解插件的每一步实现，但是我们一定要知道这款插件的使用方法。有很多东西都需要我们慢慢的去学习，so，不要着急，现在看不懂，我们就先学会使用方法！

三、上传多张图片

1、这个说起来貌似有点歧义，这里我所说的多张图片≠批量图片上传。与上传头像相同，我们首先做一下准备工作！

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

.show_container {

    overflow: hidden;

    padding: 0 2em;

}

.ul_image {

    overflow: hidden;

    zoom: 1;

}

.ul_image li {

    float: left;

    width: 60px;

    height: 60px;

    line-height: 57px;

    text-align: center;

    list-style: none;

    margin: 1em 3em 2em 0;

}

.show_container div {

    float: left;

    position: relative;

    width: 60px;

    min-height: 60px;

    /* margin: 0em 3em 2em 0; */

}

.showFirst {

    border: 1px solid #ddd;

}

.ul_image li img {

    max-width: 60px;

    max-height: 60px;

    vertical-align: middle;

}

.show_container .showFirst span {

    position: absolute;

    display: inline-block;

    width: 18px;

    border-radius: 18px;

    text-align: center;

    left: 50px;

    top: -8px;

    color: #fff;

    background-color: #777d8b;

}

.ul_image li span {

    line-height: 18px;

}

.ul_image li span {

    line-height: 18px;

}

.uploadImg_bg {

    display: inline-block;

    background-image: url(upload_bg.png);

    position: absolute;

}

.wh {

    width: 60px;

    height: 60px;

}

.show_container .showLast input {

    opacity: 0;

}

</style>

</head>

<body>

    <div class="show_container">

            <ul class="ul_image">

                <li class="up_img">

                    <div class="showFirst wh">

                        <img src="test.png" id="up_1">

                        <span>&times;</span>

                    </div>

                </li>

                <li class="up_img">

                    <div class="showFirst wh">

                        <img src="2.jpg" id="up_2">

                        <span>&times;</span>

                    </div>

                </li>

                <li>

                    <div class="showLast wh">

                        <span class="uploadImg_bg wh"></span>

                        <input type="file" class="wh" id="test" />

                    </div>

                </li>

            </ul>

        </div>

</body>

</html>

效果图：

在这个页面中，我给每个图片添加了右上角的小删除按钮，将上传组件进行了美化。其实结构蛮简单的，不要觉得css烟花缭乱，我只是想给大家展示的效果更直观一些，大家只看功能就好！下面我将写上js部分的代码并以注释作为解释~

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

    $(function() {
　　　//当上传的input的值发生变化即有上传的图片的时候，触发function

    $(".showLast .wh").change(function() {

        var id=$(".up_img").length+1;//我们为每一个上传的图片都动态的分配一个数字，作为组合id之用
　　　　　//当上传一个图片的时候，我们将把这个图片动态的追加到上传按钮之前

        var $str="<li class='up_img'>"+

                    "<div class='showFirst wh'>"+

                        "<img src='' id='up_"+

                        id+

                        "'>"+

                        "<span>×</span>"+

                    "</div>"+

                "</li>";

        $(".ul_image>li:last-child").before($str);

        readURL(this);//这个方法可以得到图片的真实路径，需要注意的是，这个方法一定要放在change事件的最后，因为要保证动态的追加的li元素已经存在于页面中，然后才可以使用readURL

    });
　　//右上角删除按钮的功能实现

    $(".showFirst span").live("click",function() {

        $(this).parent().parent().remove();

        if (!$(".ul_image div").hasClass("showFirst")) {

            $(".ul_image").empty();

        };

    });

});

function readURL(input) {//if和else是为了区分不同的浏览器

    if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function (e) {

            var len=$(".up_img").length;//得到当前li的数量，注意此时的li的数量中，已经存在新追加的li，每个li中存在一个img，我们将上传的图片的路径赋给新追加的img的src属性；同时，我们利用len来动态的为追加的元素中的img分配id

            $('#up_'+len).removeAttr('src');//移除新追加的img的src（在我看来这个语句在上传多张图片中是可以删掉的，因为新追加的img的src本来就是空的，尊重前辈的成果，放在这里也无影响）

            $('#up_'+len).attr('src', e.target.result);//为新追加的元素中的img的src赋值

        };

        reader.readAsDataURL(input.files[0]);

    }else{  var pic_url = getPath(input);

        document.getElementById("up_1").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";

    }

}

function getPath(obj){

  if(obj){

    if (window.navigator.userAgent.indexOf("MSIE")>=1){

        obj.select();

        obj.blur();

        return document.selection.createRange().text;

    }

  }

}

原理和上传头像其实是一样的，改成上传多张图片的难点，主要在动态的分配id，其实每个id操作都是一样的，只是操作的对象不同而已。

四、总结：虽然没能完全理解前辈方法的精髓，但是通过自己的努力实现了这样的功能，心里还是有一些小惊喜哒~小小的嘚瑟一下啦！还有一个问题，就是这样的方法我不知道会不会有什么问题，还有很多不足，大家一定要多多的提意见~嗯，今天就到这里了，白白！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2014.11.25 更新

五、接上面，之后发现了一个问题，else中是IE下的解决办法，在上传多张图片的时候其中的id也需要我们来拼字符串处理。修改如下：

function readURL(input) {

    var len=$(".up_img").length;//因为if和else中都需要拼串儿，所以我们在这里统一定义

    if (input.files && input.files[0]) {  var reader = new FileReader();

        reader.onload = function (e) {

            $('#up_'+len).removeAttr('src');

            $('#up_'+len).attr('src', e.target.result);

        };

        reader.readAsDataURL(input.files[0]);

    }else{ var pic_url = getPath(input);

        document.getElementById("up_"+len).style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+pic_url+"')";

    }

}

红色的部分即修改部分。

在本次修改中，我测试了谷歌，火狐，和IE7，均可正常运行。因为我电脑的IE出现问题，使用了同事的电脑，只测试了IE7。有兴趣的童鞋可以IE 8、9都测试一下的哦~

嗯，今天就到这里了，发现问题再来补充，也欢迎童鞋们发现问题与我交流哈~

2016.5.19 今天在群里有小伙伴发了这个网址，附上给大家做参考：http://www.cnblogs.com/fsjohnhuang/p/3925827.html

关于c:\fakepath\的解决办法的更多相关文章

  1. chrome文件上传 /获取文件路径c:/fakepath的解决办法

    jsp页面 <td style="text-align: left;padding-left: 20px;"> <img name="image&quo ...

  2. 懒加载session 无法打开 no session or session was closed 解决办法（完美解决）

           首先说明一下,hibernate的延迟加载特性(lazy).所谓的延迟加载就是当真正需要查询数据时才执行数据加载操作.因为hibernate当中支持实体对象,外键会与实体对象关联起来.如 ...

  3. 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法

    在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常.   意思是出现了死循环,也就是Model之间有循环包含关系: ...

  4. logstash file输入，无输出原因与解决办法

    1.现象 很多同学在用logstash input 为file的时候,经常会出现如下问题:配置文件无误,logstash有时一直停留在等待输入的界面 2.解释 logstash作为日志分析的管道,在实 ...

  5. Android权限管理之Android 6.0运行时权限及解决办法

    前言: 今天还是围绕着最近面试的一个热门话题Android 6.0权限适配来总结学习,其实Android 6.0权限适配我们公司是在今年5月份才开始做,算是比较晚的吧,不过现在Android 6.0以 ...

  6. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  7. UWP开发之Mvvmlight实践六：MissingMetadataException解决办法（.Net Native下Default.rd.xml配置问题）

    最近完成一款UWP应用,在手机端测试发布版(Release)的时候应用莫名奇妙的强行关闭,而同样的应用包在PC端一点问题都没有,而且Debug版在两个平台都没有问题,唯独手机的Release版有问题. ...

  8. 当web.config文件放置在共享目录下（UNC），启动IIS会提示有错误信息500.19，伴随有错误代码0x80070003和错误代码0x80070005的解决办法

    最近遇到一个很有意思的使用环境,操作人员将所有的网站应用内容投放到共享存储里面,并且使用微软的SMB协议将其以CIFS的方式共享出来,使用Windows Server 2008 R2的IIS将其连接起 ...

  9. Nested Loops join时显示no join predicate原因分析以及解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...

随机推荐

  1. poj2482

    (题外话:这题这是ACMer的福利啊……)我非常不擅长做矩形类的数据结构一般来说,二维的问题我们要转化为一维来考虑感觉一般的手法是对一维排序,并且线性扫描这一维,然后用各种数据结构维护另一维上的最优值 ...

  2. Java-Iterator的用法

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的I ...

  3. oracle自动编号

    oracle自动编号 在access中有自动编号的数据类型,MSSQL和MYSQL也都有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值,而oracle没有自动增长的数据类型,我们需要建 ...

  4. ANDROID Porting系列二、配置一个新产品

    ANDROID Porting系列二.配置一个新产品 详细说明 下面的步骤描述了如何配置新的移动设备和产品的makefile运行android. 1.         目录//vendor/创建一个公 ...

  5. 自主架设VOIP系统

    my.oschina.net/fcboys/blog/2695 FXS (Foreign Exchange Station) FXS is an interface which drives a te ...

  6. db2官方SQLSTATE代码提示

    官网地址:http://publib.boulder.ibm.com/infocenter/db2luw/v8/index.jsp?topic=/com.ibm.db2.udb.doc/core/r0 ...

  7. 2016 GDCPC 省赛总结

    大神们说,要多写博客,多总结,于是很久之前就开了博客,可是一篇文章都没有写,太懒也是,没什么时间也是.现在省赛结束了,也是时候好好总结一下了. 本来一开始,三个人对拿铜牌是很有把握的,在比赛一开始A了 ...

  8. java web实现 忘记密码（找回密码）功能及代码

    java web实现 忘记密码(找回密码)功能及代码 (一).总体思路 (二).部分截图 (三).部分代码 (一).总体思路: 1.在 找回密码页面 录入 姓名.邮箱和验证码,录入后点击[提交]按钮, ...

  9. HTML5事件——contextmenu 隐藏鼠标右键菜单

    在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...

  10. Rebuild my Ubuntu 分类： ubuntu shell 2014-11-08 18:23 193人阅读 评论(0) 收藏

    全盘格式化,重装了Ubuntu和Windows,记录一下重新配置Ubuntu过程. //build-essential sudo apt-get install build-essential sud ...