HTML input type=file选择图片立即显示

主要用来ul li来排列显示的图片。
引入jQuery

CSS 代码：

html,body{
    margin:0px;
    padding:0px;
}

#tdAdd input{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
    filter: alpha(opacity = 0);
    -moz-opacity: 0;
    opacity: 0;
    outline: none;
    blr: expression(this.hideFocus = true);
    cursor: pointer;
    border: none;
}


ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    width:100%;
    max-width:100%;
    height:auto;
}

li {
    float:left;
    width:20%;
}

.imgwrap{
    position: relative;
    /* min-height: 100px; */
    height: 100px;
    margin: 5px;
    text-align: center;
}

.imgwrap > img{
    max-width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: center;
}

HTML 代码：

js代码：

var aaa = document.getElementById("btnAdd"); //获取显示图片的div元素
var input = document.getElementById("file_input"); //获取选择图片的input元素
var tdid = 1;
//这边是判断本浏览器是否支持这个API。
if(typeof FileReader==='undefined'){ 
    aaa.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
    input.setAttribute('disabled','disabled'); 
}else{ 
    input.addEventListener('change',readFile,false); //如果支持就监听改变事件，一旦改变了就运行readFile函数。
} 


function readFile(){
    for (var index = 0; index
'
                + '
').insertBefore($("#tdAdd"));
            var imageStr = this.result;
   /*延迟显示图片 模拟图片上传成功后的显示。
    我这里就直接显示图片了。有兴趣的同学可以实现上传中的进度条效果。。
  */
            setTimeout(function(){
                    var td = $("#" + tdid);
                    td.html("
");
                    var $closeImg = $('').appendTo(td);
                //  $('').appendTo(td);
                    $closeImg.click(function(){
                        $(this).closest("li").remove();
                    });
            }, 2000);

            /* 上传图片到后台返回并显示。
            $.ajax({
                url: "upload.jhtm",
                type: "POST",
                data: {tdid :tdid, imageStr:imageStr},
                dataType: "json",
                cache: false,
                success: function(data) {
                    var rtntdid = data.tdid;
                    var td = $("#" + rtntdid);
                    td.html("
");
                    var $closeImg = $('').appendTo(td);
                    $('').appendTo(td);
                    $closeImg.click(function(){
                        $(this).closest("td").remove();
                    });
                }
            });
            */
        } 
    }
}