js获取图片上传预览（支持多图）

<input type="file" name="file[]" id="xdaTanFileImg" οnchange="xmTanUploadImg(this)" multiple="multiple" accept="image/*"/>

<div id="xmTanDiv">

            </div>

<script type="text/javascript">
                //判断浏览器是否支持FileReader接口
                if (typeof FileReader == 'undefined') {
                    document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
                    //使选择控件不可操作
                    document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
                }
                //选择图片，马上预览
                function xmTanUploadImg(obj) {
                    $("#xmTanDiv").html('');
                    var file = obj.files[0];
                    console.log(obj);console.log(file);
                    console.log("file.size = " + file.size);  //file.size 单位为byte

                     var aa=0;
                    for(var i=0;i<obj.files.length;i++){
                        var reader = new FileReader();

                        //读取文件过程方法
                        reader.onloadstart = function (e) {
                            console.log("开始读取....");
                        }
                        reader.onprogress = function (e) {
                            console.log("正在读取中....");
                        }
                        reader.onabort = function (e) {
                            console.log("中断读取....");
                        }
                        reader.onerror = function (e) {
                            console.log("读取异常....");
                        }
                        reader.onload = function (e) {
                            var picname=obj.files[aa].name;
                            console.log(e);
                            //var img = document.getElementById("xmTanImg");
                            var xmTanDiv = document.getElementById("xmTanDiv");
                            //img.src = e.target.result;
                            var img=document.createElement("img");
                            img.src=e.target.result;
                            var html='';
                            //html+='<div class="imglist">';
                            html+='    <div class="imgleft"><img src="'+e.target.result+'" width="150"><input type="hidden" name="pic[]" id="pic'+aa+'" value="'+picname+'"></div>';
                            html+='<div class="imgcen">';
                            html+=' <label><input type="radio" name="fengmian[]" value="'+aa+'">设为封面</label>';
                            html+=' <p><label class="PicSort">排序<input type="number"  name="PicSort[]" value="'+aa+'"  ></label></p>';
                            html+=' <p><button type="button" class="button delpic" >删除</button></p>';


                            html+='</div>';
                            html+='<div class="imgleft">';
                            html+='  <textarea name="miaoshu[]" placeholder="请输入图片摘要"></textarea>';
                            html+='</div>';
                            html+='<div style="clear: both;"></div>';
                            //html+='</div>';
                            var div=document.createElement("div");
                            div.className="imglist";
                            div.innerHTML=html;
                            xmTanDiv.append(div);
                            //xmTanDiv.append(img);
                            //或者 img.src = this.result;  //e.target == this
                            //console.log(i);
                            aa++;
                            $(".delpic").click(function(){
                                var index=$(".delpic").index(this);
                                $("#xmTanDiv .imglist").eq(index).remove();
                            });

                        }
                        //console.log(i);
                        //console.log(""+);

                        reader.readAsDataURL(obj.files[i]);
                    }

                }

            </script>