码迷,mamicode.com
首页 > 移动开发 > 详细

js上传图片获取图片地址,兼容苹果

时间:2016-08-01 21:14:56      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

别人写的一个例子我记下了先,自己测试通过的 是别人分享的页面,原作者我是不知道了,感谢原作者写的代码
下面是代码:全部复制就是例子
 
 
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
        <style type="text/css">
            li {
                width: 100px;
                height: 100px;
                float: left;
                border: 1px solid red;
            }
        </style>
    </head>
 
    <body>
    <input type="file" name="" id="files-list" value="" />
    <div id=‘output‘>
 
    </div>
    <div id="progress">
 
    </div>
</body>
</html>
<script type="text/javascript">
 
var filesList=document.getElementById("files-list");
    filesList.onchange=function(ev){
        var info="",
            output=document.getElementById("output"),
            progress=document.getElementById("progress"),
            files=ev.srcElement.files,
            type=‘default‘,
            reader=new FileReader();
            if(/image/.test(files[0].type)){                
                reader.readAsDataURL(files[0]);                
                console.log(files[0]);
                type=‘image‘
            }else{
 
//                reader.readAsText(files[0]);
//                type=‘text‘;
//            
            console.log(‘请输入图片类型‘)
            }
 
            reader.onerror=function(){
                output.innerHTML="失败"+reader.error.code;
            };
            reader.onprogress=function(ev){
 
                if(ev.lengthComputable){
                    progress.innerHTML=ev.loaded+‘/‘+ev.total;
                    console.log(progress.innerHTML)
                }
 
            };
            reader.onload=function(){            
                var html=‘‘;
                console.log(reader)
                switch(type){
                    case ‘image‘ :
                    html="<img src=\""+reader.result+"\">";
                    break;
                    case ‘text‘:
                    html=reader.result;
                    break
 
                }
                output.innerHTML=html;
            }        
    }
 
</script>

js上传图片获取图片地址,兼容苹果

标签:

原文地址:http://www.cnblogs.com/fstgshow/p/5727164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!