6位无重复验证码函数封装和原生JS图片上传（带拖拽）函数封装

一、6位无重复验证码函数封装

1.手机号码只能输入数字判断

function shuzi_sjh(e){
                //手机号码只能输入数字
                var key=window.event?e.keyCode:e.which;
                if(key>=48&&key<=57||key==8){
                    return true;
                }
                return false;
 }

2.验证码生成

function yanzhengma(){
                var a="";
                //定义计数器
                var count=0;
                while(true)
                {   //生成验证码
                    var y = parseInt(Math.random()*10);
                    //不重复判断，将生成的验证码y和最后的a去对比
                    if(a.indexOf(y)==-1)
                    {
                        a=a+y;
                        count++;
                    }
                    if(count==6)//判断验证码是不是6位
                    {
                        break;
                    }
                }
                return a;
  }

二、原生JS图片上传（带拖拽）函数封装

1.HTML

<input type="button" value="添加图片"onclick="tianjia()" ><span class="tishi">双击删除图片</span>
        <input type="file" id="file" multiple="multiple" onchange="mychange()" />
        <div id="divimg" ondragover="mydragover(event)" ondrop="mydrop(event)">    
 </div>

2.JS

           function tianjia(){
                document.getElementById("file").click();
            }

            //input的change事件

            function mychange(){
                var fles=document.getElementById("file");
                //  alert(fles.files[0].type)
                if(window.FileReader==undefined){
                    alert("浏览器不支持FileReader");
                }
                else{
                    for (var i = 0; i < fles.files.length; i++) {
                        var freader=new FileReader();
                        if(fles.files[i].type=="image/jpeg"){
                            freader.readAsDataURL(fles.files[i]);//没有返回值
                            var divimg=document.getElementById("divimg");
                            freader.onload=function(){//文件加载完成调用此函数
                            var img=document.createElement("img");
                            divimg.appendChild(img);
                            img.src=this.result;//result表示readasdataurl（）这个函数的返回值
                            };
                        }
                        
                    }
                }
            }

            //拖拽上传

            function mydragover(ev){
                ev.preventDefault();
            }
            function mydrop(ev){
                ev.preventDefault();
                var files=ev.dataTransfer.files;
                for (var i = 0; i < files.length; i++) {
                    if(files[i].type=="image/jpeg"){
                        var freader=new FileReader();
                        freader.readAsDataURL(files[i]);//没有返回值
                        var divimg=document.getElementById("divimg");
                        freader.onload=function(){//文件加载完成调用此函数
                            var img=document.createElement("img");
                            img.ondblclick=function (){
                                this.remove();
                            };
                            divimg.appendChild(img);
                            img.src=this.result;//result表示readasdataurl（）这个函数的返回值
                        };
                    }
                }
            }

三、验证码效果图