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

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>