解决本地文件上传时fakepath的问题

首先应该看一下fakepath问题具体指的是什么：

在写页面时，需要选择本地的图片上传给服务器，同时将选择的图片预览在页面中，代码是这样写的：

$("input[type='file']").on('change', function () {
    $('.content').attr('src',$(this).val());
    alert($(this).val());
});

我是这样选择图片的：

但是会发现实际添加在input框里的值（图片的src值是）这样的：

这里的fakepath就是现代浏览器为了隐藏了文件实际路径而生成的字符串。接下来就是寻找解决方法找出图片原路径的方法，接下来的代码是网上找到的解决方法：

$("input[type='file']").on('change', function () {
    var oFReader = new FileReader();
    var file = document.getElementById('input-file').files[0];
    oFReader.readAsDataURL(file);
    oFReader.onloadend = function(oFRevent){
        var src = oFRevent.target.result;
        $('.content').attr('src',src);
        alert(src);
    }
});

这样这个问题就解决了。

更多关于解决这个问题的一个很好的方案请看这位大神的博客