'<input type="file" accept="image/*" value="请选择图片"/>'使用这个之后,怎么把选择的图片放到网页上?
在浏览器上面能显示刚刚上传的图片
除了其他几位说的传到服务器返回url
或者利用filereader
读取base64
位编码赋值给src
外,还有种对象url
的做法
对象url
在web应用中使用文件
可以使用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读取步骤执行完毕')
}
}
}
js获取图片等base64
选择图片之后异步传给服务器的某个临时目录,返回路径。然后就可以显示了。
你这个需求是上传图片预览:
古老的方法:先传到服务器生成一个临时url,然后返回给页面。现在一般用FileReader,直接本地预览。不需要上传服务器。
传送到服务端,返回 URL,然后展示。
用 FileReader 接口,不经过服务端,直接读取展示。