關於c:\fakepath\的解決辦法

時間 2019-12-05

原文原文鏈接

（2014.11.25 最後更新）javascript

1、碎碎念：關於訪問本地圖片的路徑的問題，比較典型的例子就是上傳頭像。在以往的解決辦法中，咱們大可能是先將圖片上傳到服務器而後從服務器返回圖片，顯示在頁面上以達到預覽的效果。那到底有沒有辦法從前端解決這個問題呢？網上也有一些從前端解決的文章，你們的辦法都差很少，可是應用到項目中的時候，沒有成功過。因而，如今的解決辦法是我在前人的基礎上進行的改造，但願你們多多提建議和想法，互相學習。css

2、上傳頭像預覽html

一、首先作好準備工做:前端

<!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>

我作了一個小的頁面，頁面元素也很簡單，給相應的元素加了樣式。java

效果如圖：jquery

haha，用了我喜歡的動漫作封面~~吶，如今咱們能夠開始寫js部分了。chrome

根據前輩們的總結以及經驗，有了如下方法：瀏覽器

<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，不要着急，如今看不懂，咱們就先學會使用方法！服務器

3、上傳多張圖片學習

一、這個提及來貌似有點歧義，這裏我所說的多張圖片≠批量圖片上傳。與上傳頭像相同，咱們首先作一下準備工做！

<!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操做都是同樣的，只是操做的對象不一樣而已。

4、總結：雖然沒能徹底理解前輩方法的精髓，可是經過本身的努力實現了這樣的功能，內心仍是有一些小驚喜噠~小小的嘚瑟一下啦！還有一個問題，就是這樣的方法我不知道會不會有什麼問題，還有不少不足，你們必定要多多的提意見~嗯，今天就到這裏了，白白！

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

2014.11.25 更新

5、接上面，以後發現了一個問題，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+"')";  
    }
}