单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者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. [英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏]

    [英国][记录][战争中的世界:二战全史(26集)][BD-MKV/58G][中英双字][经典收藏] 原片名:The World at War  中文名:战争中的世界  导 演:Ted Childs, ...

  2. centos上node.js的安装

    CentOS 下安装 Node.js 1.下载源码,你需要在https://nodejs.org/en/download/下载最新的Nodejs版本,本文以v0.10.24为例: cd /usr/lo ...

  3. DataSet、DataTable、DataRow区别

     DataSet 表示数据在内存中的缓存. 属性 Tables  获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据 ...

  4. pl_sql 报ora-12154 无法解析指定的连接标识符的问题

    情况一:连接本地的没有问题,连接远程服务器的时候报以上错误.那么在本地客户端下的TNSNames.ora设置中配置你的远程服务器连接,本人的如下: //mestest是远程服务器名 //172.18. ...

  5. 影响布局的inline-block的空白符的问题

    昨天切页面时,进行布局时,想改变以下方法换换口味,所以就抛弃了float方法,采用了display:inline-block方法,没想到却随之而来的带来了一个想不通的问题,那就是空白.废话不多说,上代 ...

  6. ANCS协议翻译

    综述 苹果通知中心(Apple Notification Center Service, ANCS)的目的是提供给蓝牙外设一种简单.方便的获取ios设备通知信息的方式. 依赖 ANCS的使用没有依赖, ...

  7. dir_colors linux颜色配置

    在控制台下,用ls,就会发现,shell将不同类型的文件项目显示为不同的颜色.者可以提高效率,不用ls -l便能大概的把各个文件的类型情况了解一下. 你有没有想过更改这个着色配置呢? 其实,在/etc ...

  8. CATCell <——>CATPoint

    假定原先有CATCell tCell; CATVertex_var spVertex = tCell; CATPoint_var spPoint = spVertex -> GetPoint() ...

  9. [zz]npm安装错误解决方法

    错误: npm ERR! at Object.parse (native) npm ERR! at Packer.readRules (/usr/local/lib/node_modules/npm/ ...

  10. SimpleDateFormat的使用

    SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (date -> text).语法分析 (text -> date)和标准化. 下面是个小 ...