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

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

html2



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

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

<input id="add" type="file" name="添加本地图片" value="添加本地图片" onchange="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;

    }

打完收工