HTML5连续上传图片

原创 2016-11-18 10:24:21 934
摘要:/* by 的雨 time:2016/11/17 */ function update_object() {     //这是在实例化的时候,同时调用int方法     this.int.apply(this,arguments); } //这是原型链 == 一个对象 updat
/*
by 的雨
time:2016/11/17
*/
function update_object()
{
    //这是在实例化的时候,同时调用int方法
    this.int.apply(this,arguments);
}
//这是原型链 == 一个对象
update_object.prototype={
    int:function(options)
    {
        //这是接收从调用的时候传过来参数
        this.CC=options.CC;
        this.tishi=options.tishi;
        this.BB=options.BB;
        this.show=options.show;
        this.myfile=options.myfile;
        this.array=[];
        var that=this;
        this.btn=options.btn;
        this.myfile.onchange=function()   //input发生改变的时候触发(onchange事件)
        {
            //第一步骤,这个步骤是找到file,即上传的文件
            var files = this.files;
            /*
            concat() 方法用于连接两个或多个数组。 把that.filter(files)添加到that.array,这样that.array就会不断的保存file数组
            该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
            */
            that.array=that.array.concat(that.filter(files));
            that.Index();
            return this;
        }
        //这是点击上传的步骤
        this.btn.onclick=function(e)
        {
            that.array;
            var e=e||event;
            e.preventDefault();
            //点击的同时调用上传的方法
            that.upload();
        }
         
    },
    //第二步骤,这是过滤file的步骤,这一步在concat之前就调用
    filter: function(files) {
        var arrFiles=[];
        for (var i = 0, file; file = files[i]; i++) {
            if (file.type.indexOf("image") == 0) {
                //if (file.size >= 512000) {
                ////    alert('您这张"'+ file.name +'"图片大小过大,应小于500k'); 
                //} else {
                    arrFiles.push(file);   
                //}        
            } else {
                alert('文件"' + file.name + '"不是图片。');   
            }
        }
        return arrFiles    ;
    },
    //第三步骤,这是为每个file添加索引,在concat连接之后调用,把之前的this.array的内容改变了
    Index: function() {
         
        for (var i = 0, file; file = this.array[i]; i++) {
            //增加唯一索引值
            file.index = i;
        }
        //这里的this.array已经有索引
        this.onSelect(this.array);
        return this;
    },
    //第四步骤,是生成img预览和删除预览
    onSelect: function(files) {
        var that=this;
        var html = '', i = 0;
         
        //动态创建img和li
        var show1 = function() 
        {
             
            file = files[i];
             
            if (file){
                //var reader = new FileReader()
                var URL=window.URL.createObjectURL(file)
                //reader.onload = function(e) 
                //{
                    html+='<li ><div id="jindu">上传成功</div><img id="pic_' + i + '" src='+URL+'><span id="name_'+ i +'" class="upload_append_list">'+file.name+'</span><a href="#" id="del" title="删除" index="'+ i +'">×</a></li>';
                    //console.log(file);
                    i++;
                    show1();
                    that.show.style.display='block';
                    that.show.innerHTML=html;  
                     
                //}
                //reader.readAsDataURL(file);e.target.result
            } 
        };
        show1();
         
        //这是删除预览,同时把已经删除的file的索引传到下一个数组
        var del=function()
        {
            if (this.show.hasChildNodes()) {
            var Li=this.show.getElementsByTagName('li');
            var length=this.show.childNodes.length;
            for(var i=0;i<length;i++)
            {
                 
                Li[i].onmouseover=function()
                {
                    this.lastChild.style.display='block';
                    this.lastChild.onclick=function()
                    {
                        this.parentNode.parentNode.removeChild(this.parentNode);
                        var a=this.getAttribute("index"); //这一步找到索引,因为file和a索引都是一样,找到a等于找到file
                        that.picdelete(files[a]);  //这部分已经是删除的file,传递到下一个数组
                    }
                }  
                 
                Li[i].onmouseout=aa=function()
            {
                 
                this.lastChild.style.display='none';
                 
            }  
            }  
            }  
        }
        del();
    },
    //第五步骤,这是删除选择的file的步骤
    picdelete:function(a)
    {
         
        var arr=[];
        for(var i=0,file;file=this.array[i];i++)
        {
            if(a!==file) //遍历this.array找到和a相同的,就不要把它保存到数组
            {
                arr.push(file);
            }
        }
        this.array=arr;  //把最后的file对象内容重新赋值给this.array(已不是刚开始的那个值)
         
    },
    //第六步骤,这是上传的
    upload:function()
    {
        //this.array是对象,不是数组
        var that=this; 
        var formData = new FormData();  //这是HTML5的上传,能够上传图片和文字
        var aaaa
        //这一步,把所有的this.array都转换为二维数组,例file1,file2,file3,方便最后一步全部上传,不用每循环一次就上传一次
        for (var i = 0, file; file = this.array[i]; i++) {
            formData.append("file"+i,file);  //要加i否则就会被覆盖,只有最后一个值
            //aaaa=i;console.log(i);
        }
         
            aaaa=aaaa+1;
             var xhr = new XMLHttpRequest();
             //这这部分是显示上传进度条的
            xhr.upload.onprogress=function(evt)
            {
                var lod=evt.loaded;   //已经上传的大小
                var to=evt.total;   //总的大小
                var per=Math.floor(((lod/to))*100)+"%";
                that.tishi.style.display='block';
                that.tishi.innerHTML='你上传了'+(aaaa*Math.floor(((lod/to))))+'张照片;'+'已经上传'+per;
                if(per=='100%')
                {
                    var Li=that.show.childNodes;
                    for(var i=0;i<Li.length;i++)
                    {
                        Li[i].firstChild.style.display='block';
                        Li[i].onmouseover=function()
                        {
                            this.lastChild.style.display='none';   
                        }
                    }
                }
            }
            //接收后台返回来的数据
            xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
               console.log(xhr.responseText)
            }
              }
            xhr.open('POST','check.php',true);
            //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(formData);
            //传过去的值,用$_FILES接受,相当于直接表单提交
    /*
    步骤
    1,先找到file文件,过滤后用新的数组连接成一个数组
    2,为每个file添加一个i值。就是索引;
    3,从得到索引的file遍历处理,动态创建img
    4,删除事件,把选择删除的file传递到下一级
    5,重新组合file组合,重新遍历,不保存上级带有删除的file
    6,最后得到的是确定要上传的file组合,一般和开始的数组不一样
     
    */
    }
}

 这是调用的

<script>
window.onload=function()
{
    var CC=document.getElementById('cc');
    var BB=document.getElementById('bb');
    var tishi=document.getElementById('tishi');
    var show=document.getElementById('show');
    var myfile=document.getElementById('myfile');
    var btn=document.getElementById('submit');
    var update=new update_object(
    {
        CC:CC,
        BB:BB,
        tishi:tishi,
        show:show,
        myfile:myfile,
        btn:btn
    }
    );
     
}
</script>
<form action="check.php"  method="post" enctype="multipart/form-data">
<div id="aa">
 
    <div id=bb>
    <label>
        <div id="cc" title="上传图片">上传图片</div>
        <input type="file" id="myfile" name='name[]' accept="image/jpeg,image/jpg,image/png,image/gif" style=" display:none"  multiple='true'> 
     </label>
    </div> 
    <div id="size">
    <div  id="tishi">
    </div>
    <label>
    <div id="begin">开始上传</div>
    <input id='submit' type="submit" style="display:none" value="">
    </label>
    </div>
    <ul id="show">
    </ul>
</div>
<input id='submit' type="submit" value="提交">
</form>

个人是新手,所以写的代码不规范,还请多多包涵。我也是在网上找了很久,找不到全是纯JavaScript写的,所以想把这篇,让新手学习。

发布手记

热门词条