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

Question

'<input type="file" accept="image/*" value="请选择图片"/>'使用这个之后，怎么把选择的图片放到网页上？
在浏览器上面能显示刚刚上传的图片

Answer 1

可以使用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读取步骤执行完毕')
        }
    }
}

Answer 2

选择图片之后异步传给服务器的某个临时目录，返回路径。然后就可以显示了。

Answer 3

1. 传送到服务端，返回 URL，然后展示。

2. 用 FileReader 接口，不经过服务端，直接读取展示。

Answer 4

除了其他几位说的传到服务器返回url或者利用filereader读取base64位编码赋值给src外，还有种对象url的做法
对象url
在web应用中使用文件

Answer 5

你这个需求是上传图片预览:
古老的方法：先传到服务器生成一个临时url,然后返回给页面。现在一般用FileReader，直接本地预览。不需要上传服务器。

Answer 6

js获取图片等base64