利用HTML5文件访问接口实现图片预览

HTML5的文件接口虽然拿不到图片文件路径，但可以拿到图像，我这里写的个小插件，可以实现该功能，低端浏览器下做了降级，返回文件名

顺便展示了一下css美化文件上传控件的技术

<style>
.view span {
    background-position: center center;
    background-size: cover;
    display: inline-block;
    margin-right: 10px;
    vertical-align: bottom;
    display: inline-block;
    *zoom: 1;
}
.view img {
    display: block;
}
.file img {
    visibility: hidden;
}
</style>
<link href="http://s0.jmstatic.com/templates/jumei/css/v3.3/jumei_usercenter.min.css?V14.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://s0.jmstatic.com/templates/jumei/js/jquery/jquery.imagesupload.min.js"></script>
<div class="profile">
    <div class="content avatar">
        <p class="view">
            <span><img width="200" height="200" alt="大头像" src="http://p0.jmstatic.com/product_report/default/avatar/avatar.png?1390386034"></span>
            <span><img width="64" height="64" alt="小头像" src="http://p0.jmstatic.com/product_report/default/avatar/avatar_small.png?1390386034"></span>
        </p>
        <form enctype="multipart/form-data" method="post">
            <p>
                选择头像
                 
                <label class="btn_mid_pink fileup_ui">
                    <span>选择文件</span>
                    <input type="file" accept="image/*" name="avatar" class="file">
                </label>
                 
                <span class="path"></span>
            </p>
        </form>
    </div>
</div>
<script>
var file;
$("[type=file]").imagesUpload({
    error: function (info){
        $(".path").html("");
        $(".view span").css("background-image", "");
        alert(info.name + "不是图片文件，请选择一个图片文件");
    },
    callback: function(info, path){
        if(path){
            $(".view span").css("background-image", "url(" + path + ")").addClass("file");
        } else {
            $(".path").text(info.name);
        }
    }
});
</script>