关闭

ajax上传文件,提交表单,使用FormData和XMLHttpRequest提交表单

标签: ajaxhtml5xmlhttprequestFormDataajax上传
1372人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head>
    <title>Html5 Ajax 上传文件</title>
</head>
<body>

<form id="myform">

<input type="text" name="name" value="123" />
<input type="text" name="pwd" value="321" />

<input type="file" id="file" name="myfile" />

<input type="button" onclick="SubmitForm()" value="提交" />

</form>
</body>
<script>
    function SubmitForm() 
    {
        //FormDat对象
        var formobj = new FormData();

        //获取表单中的数据
        var name = document.getElementsByTagName('name').value;
        var pwd = document.getElementsByTagName('pwd').value;
        var myfile = document.getElementById('file').files[0];

        //向对象中添加要发送的数据
        formobj.append('name',name);
        formobj.append('pwd',pwd);
        formobj.append('myfile',myfile);

        //XMLHttpRequest对象
        var xmlobj = new XMLHttpRequest();

        //指定提交类型和选择要发送的地址
        xmlobj.open('post','./test.php');

        //发送数据
        xmlobj.send(formobj);

        xmlobj.onload = function()
        {
            alert(xmlobj.responseText);//获取后台返回的数据
        }
    }

</script>
</html>

又或者可以更加简便的

    function SubmitForm() 
    {
        //实例化FormDat对象时传入form表单对象
        var formobj = new FormData(document.getElementById('myform'));

        //XMLHttpRequest对象
        var xmlobj = new XMLHttpRequest();

        //指定提交类型和选择要发送的地址
        xmlobj.open('post','./test.php');

        //发送数据
        xmlobj.send(formobj);

        xmlobj.onload = function()
        {
            alert(xmlobj.responseText);//获取后台返回的数据
        }
    }

PHP代码:

<?php

$aa = $_FILES['myfile'];//接收文件
$bb = $_POST;//接收数据
move_uploaded_file($aa['tmp_name'],'./123.jpg');//上传文件

echo 1;//返回数据
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:49476次
    • 积分:824
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:0篇
    • 译文:0篇
    • 评论:6条
    文章分类
    最新评论