ajax+XMLHttpRequest裏的FormData實現圖片異步上傳

時間 2019-11-30

標籤 ajax+xmlhttprequest ajax xmlhttprequest formdata 實現圖片異步上傳欄目 Ajax 简体版

原文原文鏈接

發這篇博客的時候我是本身在研究這個XMLHttpRequest請求，在別人的博客上面知道XMLHttpRequest新加了一個FormData的東西，好像如今APP請求後臺也有用這種方式的吧。javascript

別的很少說，我一直在糾結js怎樣獲取到form表單中file類型的值，或者說是數據。一直沒有找到方法，前兩天看了一個博客，他是經過Form表單來初始化FormData，獲得一個對象而後經過Ajax方式將文件數據發送到PHP文件php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試FormData方式上傳文件</title>
    <style>
        body{margin: 0;padding: 50px 0 0 0;}
        .topDiv{margin-left: 40%; margin-top: 200px; float: left; position: absolute;}
        .topDiv ul li{list-style: none; margin-top: 10px;}
        .topDiv ul li label{color: #999;}
        .topDiv ul li input{width: 150px;}
    </style>
</head>
<body>
<div class="topDiv" align="center">
    <form>
        <ul>
            <li>
                <label>圖片名稱:</label>
                <input type="text" name="name" id="name" value="">
            </li>
            <li>
                <label>圖片上傳:</label>
                <img src="http://usr.im/100x50" width="150" height="100">
            </li>
            <li>
                <input type="button" onclick="onFormPost()" value="提交">
            </li>
        </ul>
    </form>
    <form id="formData" style="display: none">
        <ul>
            <li>
                <label>選擇圖片:</label>
                <input type="file" name="file" onchange="onFormPost()" value="">
            </li>
        </ul>
    </form>
</div>

</body>
<script type="text/javascript" src="../Public/js/jquery-2.1.4.min.js?ver=1"></script>
<script>
    function onFormPost(){
        var myForm=new FormData(document.getElementById('formData'));
//        myForm.append("name",document.getElementById('name').value);
//        myForm.append("file",document.getElementsByName("file").files[0])
//        var myXhr=new XMLHttpRequest();
//        myXhr.open("post","upload.php");
//        myXhr.send(myForm);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: myForm,
            processData: false,  // 告訴jQuery不要去處理髮送的數據
            contentType: false,   // 告訴jQuery不要去設置Content-Type請求頭
            success:function(data){
                alert(data);
            },error:function(){

            }
        });
    }

</script>
</html>