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

最新推荐文章于 2024-02-21 19:19:17 发布

河边疯了的羊

最新推荐文章于 2024-02-21 19:19:17 发布

阅读量3.7k

点赞数

分类专栏： js 文章标签：表单 xmlhttprequest ajax

本文链接：https://blog.csdn.net/hefy780144/article/details/65440423

版权

js 专栏收录该内容

4 篇文章 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>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

又或者可以更加简便的

    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);//获取后台返回的数据
        }
    }
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
  
  
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

PHP代码：

<?php

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

echo 1;//返回数据

河边疯了的羊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax上传文件，提交表单，使用FormData和XMLHttpRequest提交表单

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="
复制链接

扫一扫