html5上传多张图片的方法

window.onload = function(){   
            var input = document.getElementById("file_input");   
            var result,div;   
        
            if(typeof FileReader==='undefined'){   
                result.innerHTML = "抱歉,你的浏览器不支持 FileReader";   
                input.setAttribute('disabled','disabled');   
            }else{   
                input.addEventListener('change',readFile,false);   
            }
            function readFile(){   
                for(var i=0;i<this.files.length;i++){   
                    if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){  //判断上传文件格式   
                        return alert("上传的图片格式不正确,请重新选择")
                     }   
                    var reader = new FileReader();   
                    reader.readAsDataURL(this.files[i]);   
                    reader.onload = function(e){   
                        result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';   
                        div = document.createElement('div');   
                        div.innerHTML = result;   
                        document.getElementById('body').appendChild(div);  
                     }   
                }   
            }   
        }   
    </script>
    </head>
    <body id='body'>
       <div class="container">  
        <label>请选择一个图像文件:</label>  
        <input type="file" id="file_input" multiple/>  
    </div> 

  

转载于:https://www.cnblogs.com/leijuan/p/6110914.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值