h5页面使用FileReader读取本地图片文件并显示

原理：使用input的 type="file" 属性 input的 this.files[0] 值， 首先判断是否为img类型，并且获取到img的路径， innerHtml 到所要展示图片的 divbox中。

image.png

效果图：

(image.png

  

    

      请选择一个图像文件(请使用高级浏览器浏览：如Chrome，Firefox)：

      
    
    
 
       
    
  
  

  
  



/*******02****/

                        

                            
 
                        
                
                        

相关资料 本人比较菜 在嵌套html的时候错误百出，找了一些资料 希望对你们有用：
position 是相对于 element 元素的位置，并且只能是以下的字符串之一：
beforebegin：在 element 元素的前面。
afterbegin：在 element 元素的第一个子节点前面。
beforeend：在 element 元素的最后一个子节点后面。
afterend：在 element 元素的后面。
text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

// 
one
 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '
two
');

// 此时，新结构变成：
// 
one
two

参考Element.insertAdjacentHTML()

适用范围：

优点：代码简洁，只需要在一个容器上和一个input上 输入1个id 就可以上传照片了
适用： 不需要太多操作，一次只能上传一张照片，没有预览和删除的效果，

如有需要请点击查看原文：
原文地址