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

原创 2016年05月30日 18:36:10
<!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;//返回数据
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

html> head> title>Html5 Ajax 上传文件title> head> body> form id="myform"> input type="text" name="...

使用FormData来提交表单同时上传文件到服务端

jsp代码:             选择模板: 模板名: 模板路径: 模板组: 模板优先级: 普通 优先 ...

上传文件 使用HTML5的FormData 提交表单和文件数据

后台部分: 数据库可以存放二进制流数据  主流的如mysql  oracle 中的blob类型就是二进制流。但是数据库一般是系统的瓶颈,文件建议存放在硬盘,路劲存放在数据库。不管目前针对 的是什么...

Ajax 使用formdata 实现 无刷新表单上传

FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示           点击b...

Spring利用MultipartFile接收FormData对象上传文件(可接收AJAX上传的包含多文件的复杂表单内容)

SpringMvc多文件上传
  • Nifury
  • Nifury
  • 2016年09月01日 12:06
  • 5826

异步上传文件使用new FormData($(‘#uploadForm‘)[0])序列化表单

关于jquery的 $("form").serialize()和 new FormData表单序列化 $("form").serialize()和 new FormDat...

ajax上传form表单(type='file')FormData

以上是一般形式,用的比较多。但是当我们遇到input[type=”file”]时就不知道要如何向后台传输数据了,”.val()”肯定是不行的,所以就讲到FormData这个构造函数: 除此之外,你还可...

使用ajax提交form表单,包括ajax文件上传

使用ajax提交form表单,包括ajax文件上传 http://www.cnblogs.com/zhuxiaojie/p/4783939.html 前言 使用ajax请求数...

使用ajax提交form表单,包括ajax文件上传

前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aj...

使用ajax提交form表单,包括ajax文件上传

使用ajax提交form表单,包括ajax文件上传 http://www.cnblogs.com/zhuxiaojie/p/4783939.html 前言 使用ajax请求数...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax上传文件,提交表单,使用FormData和XMLHttpRequest提交表单
举报原因:
原因补充:

(最多只允许输入30个字)