ajax+XMLHttpRequest里的FormData实现图片异步上传

发这篇博客的时候我是自己在研究这个XMLHttpRequest请求，在别人的博客上面知道XMLHttpRequest新加了一个FormData的东西，好像现在APP请求后台也有用这种方式的吧。

别的不多说，我一直在纠结js怎样获取到form表单中file类型的值，或者说是数据。一直没有找到方法，前两天看了一个博客，他是通过Form表单来初始化FormData，得到一个对象然后通过Ajax方式将文件数据发送到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>

然后只需要在upload.php文件处理上传

爱程序网

Tags：[db:关键字]