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

猜你喜欢

转载自blog.csdn.net/codercwm/article/details/89062328
今日推荐