js实现多张图片上传及预览 相册 拍照选择及删除图片

js input file 多图片上传，一次性上传多张图片（前端预览功能）；

运用js实现上传图片前的预览（支持多张图片），网上很多案例都是没有处理每个上传的图片文件名，这里我就增加了图片文件名的方法，删除对应图片的方法，希望亲们可以在项目中用到…
其他input file多文件方法类似，用到FileReader读取文件的方式…

先来个效果图：

html结构

 

js功能

 

//上传多个文件方法
    //input file已增加multiple属性，按住ctrl可选择多图
    document.getElementById("add-pic-btn").addEventListener("change",function(){
        var obj = this,
            length = obj.files.length,
            arrTitle = []; //存标题名
            _html = '';

        for(var i=0; i<length; i++) {
            var reader = new FileReader();
            if (!reader) {
               console.log('对不起，您的浏览器不支持！请更换浏览器试一下');
                return
            }
            //存储上传的多张图片名字
            arrTitle.push(obj.files[i].name)

            reader.error=function(e){
                console.log("读取异常")
            }

            //iffi语法
            ;(function(i){
                  //读取成功
                reader.onload = function(e){
                    //console.log(e)
                    var _src = e.target.result;

                    //节点
                    var divItem = document.createElement('div');
                    divItem.setAttribute('class','item');
                    var divPic = document.createElement('div');
                    divPic.setAttribute('class','pic-box');
                    var img = document.createElement('img');
                    img.setAttribute('class','img');
                    img.setAttribute('src',_src);
                    var divTk = document.createElement('div');
                    divTk.setAttribute('class','tk')
                    var spanDel = document.createElement('span');
                    spanDel.setAttribute('class','del');
                    spanDel.setAttribute('title',arrTitle[i]);
                    spanDel.innerText = 'x';

                    divTk.innerHTML = arrTitle[i];

                    divItem.appendChild(divPic);
                    divPic.appendChild(img);
                    divItem.appendChild(divTk);
                    divItem.appendChild(spanDel);

                    //增加节点结构
                    var groupTu =  document.getElementById('groupTu');
                    groupTu.insertBefore(divItem, groupTu.firstChild);

                    //删除节点方法
                    spanDel.onclick = function(){
                        removeItem(this);
                        return false;
                    };

                };
            })(i)

            reader.οnlοadstart=function(){

            }
            reader.οnprοgress=function(e){
                if(e.lengthComputable){
                   console.log("正在读取文件")
                }
            };
            reader.readAsDataURL(obj.files[i]);
        }

    })

    //删除图片
    function removeItem(delNode){
        var itemNode = delNode.parentNode,
            title = delNode.getAttribute('title');
        var flag = confirm("确认要删除名为："+title+"的图片？");
        if(flag) {
            itemNode.parentNode.removeChild(itemNode);
            console.log('删除成功~')
        }
        return false;
    }