input[ type="file"]上传文件问题

input标签中的type属性支持很多不同的类型如text，password，money等，在很早之前对上传文件的功能做过一次尝试，后来给忘记了，前几天被难为了一次翻翻找找找到了之前写过的一个小demo放上来免得又忘掉。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                display: flex;
                list-style: none;
            }
            li{
                position: relative;
                margin: 10px;
                height: 200px;
                
            }
            .cover{
                position: absolute;
                height: 100%;
                width: 100%;
                background: #111;
                opacity: 0.5;
                bottom: 0;
            }
            span{
                display: inline-block;
                width: 180px;
                font-size: 150px;
                line-height: 180px;
                text-align: center;
                border: 10px saddlebrown solid;
            }
            #add{
                margin: 10px;
                position: relative;
            }
            input{
                position: absolute;
                display: inline-block;
                width: 200px;
                height: 200px;
                top: 0;
                left: 0;
                opacity: 0;
            }
            img{
                height: 200px;
            }
            #box{
                
            }
            #body{
                display: flex;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <ul id="box">
                
            </ul>
            <div id="add">
                <span>
                    +
                </span>
                <input type="file" name="" id="fs" multiple="multiple"  value="" />
            </div>
        </div>
        <script type="text/javascript">
            fs.onchange=function  (e) {
                let info=e.target.files
                let peg=/^image\//
                for (let i=0 ;i<info.length;i++) {
                    if (peg.test(info[i].type)==false){
                        alert("不是图片形式文件无法上传")
                        continue
                    }
                    let readfs=new FileReader()
                    readfs.readAsDataURL(info[i])
                    readfs.onload=function(){
                        let img = new Image
                        img.src=readfs.result
                        let li=document.createElement("li")
                        let coverDiv=document.createElement("div")
                        coverDiv.setAttribute("class","cover")
                        li.appendChild(coverDiv)
                        li.appendChild(img)
                        box.appendChild(li)
                        let xhr=new XMLHttpRequest
                        xhr.open("POST","/upload",true)
                        xhr.upload.onprogress=function  (e) {
                            var b=(e.loaded/e.total)*100 
                            coverDiv.style.height=(100-b)+"%"
                            li.style.border="cornflowerblue solid 2px"
                        }
                        xhr.onload=function  () {
                            if (xhr.status==200) {
                                console.log(xhr.responseText)
                            }
                        }
                        let data =new FormData
                        data.append("abc",info[i])
                        xhr.send(data)
                    }
                }    
            }
        </script>
    </body>
</html>

页面效果也一起放上来吧

posted @ 2020-11-12 11:10  妄欢  阅读(353)  评论(0)  编辑  收藏  举报