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

最新推荐文章于 2023-04-03 00:22:51 发布

weixin_30394333

最新推荐文章于 2023-04-03 00:22:51 发布

阅读量423

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/codercwm/p/10135059.html

本文介绍了一种使用HTML5和Ajax实现文件上传的方法。通过FormData对象收集表单数据及文件，并通过XMLHttpRequest发送到服务器。PHP后端接收文件并返回确认消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;//返回数据

转载于:https://www.cnblogs.com/codercwm/p/10135059.html