您的位置:首页 > Web前端 > JavaScript

在h5中用JS从本地引入照片及其显示

2017-09-03 14:53 211 查看
JS代码:

function Click_input(){
document.getElementById('Page2_caozuoquyu_input').addEventListener('change',function(e){
var files = this.files;
var img = new Image();
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(){
//img的定位
img.src = this.result;
img.setAttribute("id","Page2_caozuoquyu_tupian1");
img.style.width = "50%";
img.style.height= "50%";
img.style.top="30";
img.style.left="20";
img.style.position='absolute';
//添加img子节点
document.getElementById('Page2_caozuoquyu').appendChild(img);
}
});
}


html核心代码:

//input标签
<div id="Page2_caozuoquyu">
<input type="file" multiple accept="image/*" id="Page2_caozuoquyu_input" onclick="Click_input()" />
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  函数 javascript