html实战之二（图片选择器,js操作dom应用）

接着上一篇，先看一下效果

html2

对头，就是添加本地图片显示出来

选择文件的东东，input type="file"

<input id="add" type="file" name="添加本地图片" value="添加本地图片" οnchange="addImage()">

选完图片后就会触发onchange方法，去调用addImage

1.我是table做的图片列表，所以拿到path之后得往里面添加

  function addImage(){  //添加图片
            // //读取图片
            //var path = document.getElementById('add').value;
            var path = getFileUrl('add');
            //向表格中添加该图片
            var table = document.getElementById('imgs_table');
            var newTr = table.insertRow();//添加新行，trIndex就是要添加的位置 
            var newTd1 = newTr.insertCell(); 
            newTd1.innerHTML = `<img src="${path}">`;
            /*var realPath = getFileUrl('add');
            alert(realPath);*/


        }

2.拿到path时候发现得到的是fakePath，所以搜了一下解决办法

   /** 
     * 从 file 域获取 本地图片 url 
     */
    function getFileUrl(sourceId) {
        var url;
        if (navigator.userAgent.indexOf("MSIE") >= 1 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0) ) { // IE10取消了滤镜
            //url = document.getElementById(sourceId).value;
            document.all.imgOne.select();
            $("#preview").focus();
            url = document.selection.createRange().text;
        
        } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox 
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome 
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }else if(navigator.userAgent.indexOf("MSIE 10.0") > 0){
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }else{
            url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
        }
        return url;
    }

打完收工