js-图片上传

需求：单独上传图片和多图上传
实现一：使用原生ajax来完成

1、html代码界面提交按钮

<input type="file" name="pic[]" multiple id="myinput">   
<button onclick="uploadFile()">上传</button>

2、js代码

    <script>
        function uploadFile(){
            

            var files=document.getElementById("myinput").files;
            console.log(files)
             // [].forEach.call(document.getElementById("myinput").files, function(itemFile){
    //             //读取文件
    //              readImage(itemFile);
    //             // console.log(e.dataTransfer.files)
    //             // console.log(itemFile)  


    //         })

    for(var i=0;i<files.length;i++){

        readImage(files[i])
    }


    

            function readImage(obj){

            var xhr = new XMLHttpRequest();

            var fd = new FormData();

            fd.append("pic", obj);
            // fd.append("username", "xiaopingping");

            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }

            xhr.open("POST", "upload.php");

            xhr.send(fd);

            }

            

            
        }

    </script>

实现二：使用juery来实现

<script>
//这里是单张上传
        function uploadFile(){
            var fd = new FormData();

            fd.append("pic", document.getElementById("myinput").files[0]);
            
            $.ajax({
                url:"upload.php",
                type:"post",
                data:fd,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log("来啦");
                    console.log(res);
                },
                dataType:"json"
            })
        }
//多张上传
        function uploadFiles(){
            var fd = new FormData();

            var imageFiles = document.getElementById("myinput").files;

            for(var i = 0; i <imageFiles.length;i ++ ){
                fd.append("pic"+i, imageFiles[i]);
            }

            $.ajax({
                url:"upload.php",
                type:"post",
                data:fd,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log("来啦");
                    console.log(res);
                },
                dataType:"json"
            })
        }

    </script>