首页 > 代码库 > input file 美化及上传本地预览

input file 美化及上传本地预览

 

效果:

 

/*input file 美化及上传本地预览,兼容IE6-8,FIrefox, Chrome(需在服务端,本地无效)*/
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>input file 美化</title>
    <script src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input[type = ‘file‘]").change(function () {
                var explorer = window.navigator.userAgent;
                var url = document.getElementById("image");
                var file = document.getElementById("file");
                if (explorer.indexOf("MSIE") >= 0) {
                    file.select();
                    url.src = document.selection.createRange().text;
                }
                else if (explorer.indexOf("Firefox") >= 0 || explorer.indexOf("Chrome") >= 0) {
                    var oFReader = new FileReader();
                    var oFile = file.files[0];
                    oFReader.onload = function (e) {
                        url.src = e.target.result;
                    }
                    oFReader.readAsDataURL(oFile);
                }
            });
        })
    </script>
    <style>
        * { margin: 0; padding: 0; }

        a { text-decoration: none; }

        .btn_addPic {
            display: block;
            position: relative;
            width: 140px;
            height: 39px;
            overflow: hidden;
            border: 1px solid #EBEBEB;
            background: none repeat scroll 0 0 #F3F3F3;
            color: #999999;
            cursor: pointer;
            text-align: center;
        }
        .btn_addPic span { display: block; line-height: 39px; }

        .btn_addPic em {
            background: url(add.png) 0 0;
            display: inline-block;
            width: 18px;
            height: 18px;
            overflow: hidden;
            margin: 10px 5px 10px 0;
            line-height: 20em;
            vertical-align: middle;
        }
        .btn_addPic:hover em { background-position: -19px 0; }

        .filePrew {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 140px;
            height: 39px;
            font-size: 100px; /* 增大不同浏览器的可点击区域 */
            opacity: 0; /* 实现的关键点 */
            filter: alpha(opacity=0); /* 兼容IE */
        }

        #min_img { width: 100px; }
        
        #min_img img { width: 100%; }
    </style>
    
</head>
<body>
<form>
    <a href="javascript:void(0);" class="btn_addPic">
        <span><em>+</em>添加图片</span>
        <input tabindex="3" title="支持jpg、jpeg、gif、png格式,文件小于5M" size="3" name="file" id="file" class="filePrew" type="file">
    </a>
    <div id="min_img"><img id="image" /></div>
</form>
</body>
</html>

  add.png

 

**********************************************************************************************************************

input file美化原理:将input file透明值设为0(opacity: 0;),就不会显示,但是占据位置,可以相应操作,然后在它上面或下面放上美化的元素即可。

**********************************************************************************************************************

1. IE6可以使用value属性获取绝对路径
例:
 $("input[type = ‘file‘]").change(function () {
            var url= $(this).val();
 });

IE7 8本地可以获取地址,服务器只能获取名字,可以使用以下方式获取,支持IE6-8。
file.select();
url.src = document.selection.createRange().text;

2. 火狐和谷歌可以使用html5的File API中得FileReader获取本地路径

    readAsArrayBuffer(file):将文件读取为ArrayBuffer。
    readAsBinaryString(file):将文件读取为二进制字符串
    readAsDataURL(file):将文件读取为Data URL
    readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为‘UTF-8‘

 

   FileReader对象在读取文件后,还需要进行处理。为了不阻塞当前线程,API采用了事件模型,可以注册这些事件:

    onabort:中断时触发
    onerror:出错时触发
    onload:文件成功读取完毕时触发
    onloadend:文件读取完毕时触发,无论是否失败
    onloadstart:文件开始读取时触发
    onprogress:当文件读取时,周期性地触发

 

例:

 $("input[type = ‘file‘]").change(function () {
            var oFReader = new FileReader();
            var oFile = document.getElementById("file").files[0];

            oFReader.onload = function(e) {
                 document.getElementById("image").src = e.target.result;  /*不可传递给变量*/
            }
            
            oFReader.readAsDataURL(oFile);
   });


3. 谷歌可以使用window.webkitURL.createObjectURL(file.files[0])获取本地路径
例:
 $("input[type = ‘file‘]").change(function () {
            var docObj=document.getElementById("file");
            var imgurl= window.webkitURL.createObjectURL(docObj.files[0]);
 });

注: 2 3谷歌必须在服务器端才可有效果,2火狐本地可用。

 

input file 美化及上传本地预览