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