JS兼容各个浏览器的本地图片上传即时预览效果\、

在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果，在IE10以下浏览器中使用滤镜来解决图片显示问题。

HTML5中的FileReader对象主要是把文件读入内存中，并且读取文件中数据，目前为止，firefox3.6+、chrome6+、safari5.2+、opera11+及IE10浏览器支持FileReader对象，它有一下5种方法：

1、readBinaryString;

2、readAsText;

3、readAsDataURL 将对象或文件中数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。

4、readAsArrayBuffer;

5、abort;

现在我们要用的是第三种

var aFile=ev.dataTransfer.files;

var reader=new FileReader();

reader.onload=function(){
   alert(reader.result);
};

reader.onerror=function(){
   alert('读取错误');
};

reader.onloadend=function(){
   alert('读取完成');
};

reader.onloadstart=function(){
   alert('开始读取');
};

reader.onprogress=function(ev){
   var scale=ev.loaded/ev.total;

   alert('正在读取');
}

rearder.onabort=function(){
   alert('读取中断');
};

强制中断：
   reader.abort();

通过文本形式读取：
reader.readAsText(aFile[0],'编码格式');
   编码格式:  utf-8
            gb2312

通过base64方式读取：
reader.readAsDataURL(aFile[0]);
案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        img{
            width:100px;
            height:100px;
        }
        form label{
            display:inline-block;
            width:100px;
            height:30px;
            line-height:30px;
            text-align:right;
        }
    </style>
</head>
<body>
<form id="infoForm" action="url" method="post" enctype="multipart/form-data">
    <!--图片上传隐藏信息-->
    <!--accept="audio/*|video/*|image/*|MIME_type   规定多接受的文件"-->
    <input type="file" accept="image/*" prev-target="#goodPic" id="goodsPreview" style="display:none"/>
    <input type="file" accept="image/*" prev-target="#goodsCarouselImg1" id="loop1" style="display:none"/>
    <input type="file" accept="image/*" prev-target="#goodsCarouselImg2" id="loop2" style="display:none"/>
    <input type="file" accept="image/*" prev-target="#goodsCarouselImg3" id="loop3" style="display:none"/>
    <ul>
        <li>
            <label for="goodsName">商品名称</label>
            <input id="goodsName" type="text" placeholder="请输入商品名称"/>
        </li>
        <li>
            <label for="goodsNum">商品编号</label>
            <input id="goodsNum" type="text" placeholder="请输入商品编号"/>
        </li>
        <li>
            <label for="goodsPrice">商品价格</label>
            <input id="goodsPrice" type="text" placeholder="请输入商品价格"/>
        </li>
        <li class="goodsList">
            <label>商品主图</label>
            <img src="img/goods1.jpg" file-target="#goodsPreview"id="goodsPic" alt="商品主图"/>
        </li>
        <li class="goodsList">
            <label>商品轮播图</label>
            <img src="img/goods1.jpg" file-target="#loop1" id="goodsCarouselImg1" alt="商品轮播图1"/>
            <img src="img/goods1.jpg" file-target="#loop2" id="goodsCarouselImg2" alt="商品轮播图2"/>
            <img src="img/goods1.jpg" file-target="#loop3" id="goodsCarouselImg3" alt="商品轮播图3"/>
        </li>
        <li><label>&nbsp;</label><input type="button" id="subBtn" class="btn" value="提交信息"/></li>
    </ul>
</form>
</body>
<script src="jquery.1.11.3.js"></script>
<script>
    $("#goodsPic,#goodsCarouselImg1,#goodsCarouselImg2,#goodsCarouselImg3").click(function(){
        $($(this).attr('file-target')).click();
    });
    $('[type=file]').on('change',function(){
        var preview=$($(this).attr('prev-target'));
        var reader=new FileReader();
        reader.onload=function(e){
            var avatorFile= e.target.result;
            if(!avatorFile){
                alert('您的浏览器不支持预览功能');
                return;
            }
            preview.attr('src',avatorFile);
        }
        reader.readAsDataURL(this.files[0]);
    })
</script>
</html>

巴特西

JS兼容各个浏览器的本地图片上传即时预览效果\、

最新文章

热门文章