单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。

FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：var oMyForm = new FormData();

html+javascript代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>FormData</title>

</head>

<body>

    <form name="form1" id="form1">

        <p>name:<input type="text" name="name" ></p>

        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>

        <p>photo:<input type="file" name="photo" id="photo"></p>

        <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>

    </form>

    <div id="result"></div>

</script>

    <script type="text/javascript">

        function fsubmit() {

            var form=document.getElementById("form1");

            var formData=new FormData(form);

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange=function(){

              if(oReq.readyState==4){

                if(oReq.status==200){

                    var json=JSON.parse(oReq.responseText);

                    var result = '';

                    // result += 'name=' + ret['name'] + '<br>';

                    // result += 'gender=' + ret['gender'] + '<br>';

                     result += '<img src="' + json['photo'] + '" width="100">';

                     document.getElementById('#result').innerHTML = result;

                }

              }

            }

            oReq.open("POST", "server.php");

            oReq.send(formData);

            return false;

        }

    </script>

</body>

</html>

//php代码

<?php

$name = isset($_POST['name'])? $_POST['name'] : '';

$gender = isset($_POST['gender'])? $_POST['gender'] : '';

$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));

$response = array();

if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){

    $response['isSuccess'] = true;

    $response['name'] = $name;

    $response['gender'] = $gender;

    $response['photo'] = $filename;

}else{

    $response['isSuccess'] = false;

}

echo json_encode($response);

?>

PS:在用FromData发送数据时，input type="button" 不会被提交。因此如果php接收数据时，避免用button中的name值做来源判断。

FormData实现文件上传实例的更多相关文章

  1. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  2. PHP中，文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  3. PHP学习笔记--文件目录操作(文件上传实例)

    文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...

  4. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  5. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  6. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  7. ExtJS：文件上传实例

    ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...

  8. Grails笔记三：完整的文件上传实例

    文件上传在web应用中是比较普遍的,相对于使用jsp等技术实现文件上传,Grails的文件上传着实让人喜爱,因为极其简单,让人看一遍就容易轻松记住!不多说,实例如下: 假设已有一个名为uploadFi ...

  9. SpringMVC+ajax文件上传实例教程

    原文地址:https://blog.csdn.net/weixin_41092717/article/details/81080152 文件上传文件上传是项目开发中最常见的功能.为了能上传文件,必须将 ...

随机推荐

  1. 关于C++中的拷贝构造函数和赋值函数

    如果类定义的数据成员中存在指针或引用,那么最好重载这两个函数. 1.     定义 拷贝构造函数的定义格式:构造函数名(const 源类名& 引用对象形参名){} 赋值函数定义格式:源类名 & ...

  2. [Python] 发送email的几种方式

    python发送email还是比較简单的,能够通过登录邮件服务来发送,linux下也能够使用调用sendmail命令来发送,还能够使用本地或者是远程的smtp服务来发送邮件,无论是单个,群发,还是抄送 ...

  3. LINQ 之四 （SkipWhile和TakeWhile）

    看到书上的例子很正常,于是,我写了个不正常一点的. 书上的是这样的 class Program { static void Main(string[] args) { ,,,,,,,,}; ); fo ...

  4. JS判断是不是Decimal类型(正则实现)

    备忘: function isDecimal(item) { var obj = $(item); if (obj.length > 0) { if ($(obj).val() != null ...

  5. E - Number Sequence（第二季水）

    Description A single positive integer i is given. Write a program to find the digit located in the p ...

  6. 设定MS SQL Server 2008定期自动备份

    1.说明 SQL Server2008 本身具有定期自动备份功能,我们只需要通过简单的配置就可以实现非常简单高效的自动备份功能. 2.打开SQL Server代理服务 要实现自动备份功能,首先要保证S ...

  7. go pprof

    import _ "net/http/pprof" func main() { go func() { http.ListenAndServe("localhost:60 ...

  8. spring:ContextLoaderListener接口

    在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听器,启 ...

  9. 移动端-弹窗demo

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. zeromq-python使用

    安装参考saltstack编译安装.note 官方使用文档: http://zguide.zeromq.org/page:all 中文翻译文档: http://iyuan.iteye.com/blog ...