开发者社区> 问答> 正文

'<input type="file" accept="image/*"/>'使用这个之后,怎么把选择的图片放到网页上?

''使用这个之后,怎么把选择的图片放到网页上?
在浏览器上面能显示刚刚上传的图片

展开
收起
杨冬芳 2016-06-20 13:55:05 2977 0
1 条回答
写回答
取消 提交回答
  • IT从业

    可以使用html5的fileReader 接口,大致代码如下:

    function read(){
        var fs=document.getElementById('file').files[0];
        if(fs){
            var reader=new new FileReader();
            reader.readAsDataURL(fs);
            function li(str){
                var obj=document.createElement('li');
                obj.innerHTML=str;
                document.body.appendChild(obj);
            }
            reader.onloadstart=function(){
                li('开始读取')
            }
            reader.onprogress=function(){
                li('正在读取.....')
            }
            reader.onload=function(e){
                var img=document.createElement('img');
                img.src=this.result;
                document.body.appendChild(img);
            }
            reader.onabort=function(){
                li('读取中断!!')     
            }
            reader.onerror=function(){
                li('读取出现错误!!')
            }
            reader.onloadend=function(){
                li('FileReader读取步骤执行完毕')
            }
        }
    }
    
    2019-07-17 19:44:05
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
<img src...[mitah].1536575523.pdf 立即下载
How big data can help small data? 立即下载
How big data can help small da 立即下载