需求：單獨上傳圖片和多圖上傳
實現(xiàn)一：使用原生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>

實現(xiàn)二：使用juery來實現(xiàn)

<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>