/**

FormData ==>表单数据

能自动把表单数据拼接打包

当ajax发送数据时,发送打包的数据;

还可以使用FormData对象的append(key,value)添加数据

FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收

说明FormData对象既可以打包发送表单的数据,也可以手动append数据

注意,input Dom对象有一个files属性  十一哥文件数组

**/

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<head>

<title>FromData</title>

</head>

<script>

window.onload=function(){

    function _ajax(data,url,method){

        var xml=new XMLHttpRequest();

        xml.open(method,url,true);

        xml.onreadystatechange=function(){

            if(this.readyState==4){

                alert(this.responseText);

            }

        }

        xml.send(data);

    }

    function send_form(){

        var myform=document.getElementById('myform');

        //这行代码FormData对象帮忙把数据打包了;

        var _formData=new FormData(myform);

        var myImg=document.getElementById('myImg').files[0];

        alert(myImg);

        _formData.append('sex','man');

        _formData.append('like','basketball');

        //直接把_formData对象传给XMLHttpRequest对象的send()方法

        _ajax(_formData,'./accept.php','post')

    }

    var btn=document.getElementById('btn');

    btn.onclick=function(){

        send_form();

    }

}

</script>

<body>

<form id='myform'>

    姓名:<input type='text' name='name'/><br/>

    城市:<input type='text' name='city'/><br/>

    密码:<input type='password' name='password'/><br/>

    <input type='file' name='myImg' id='myImg'/><br/>

    <input type='button' value='确认' id='btn'/>

</form>

</body>

</html>

=============================

//后台接收到的数据

Array

(

    [name] => lpprince

    [city] => qingyuan

    [password] => 123

    [sex] => man

    [like] => basketball

)

Array

(

    [myImg1] => Array

        (

            [name] => xiao1.jpg

            [type] => image/jpeg

            [tmp_name] => /Applications/XAMPP/xamppfiles/temp/php0AjbuQ

            [error] => 0

            [size] => 13039

        )

    [myImg2] => Array

        (

            [name] => xiao.c

            [type] => application/octet-stream

            [tmp_name] => /Applications/XAMPP/xamppfiles/temp/phpMprmQq

            [error] => 0

            [size] => 49

        )

)

input的file属性以及window.URL.createObjectURL(  ) 方法

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<head>

<title>FromData</title>

</head>

<script>

window.onload=function(){

    var btn=document.getElementById('btn');

    var file_msg=document.getElementById('file_msg');

    var input=document.getElementById('myImg')

    input.onchange=function(){

        /*

        input 有files属性,该属性是一个数组,保存了图片的信息

        name=>L.png

        lastModifiedDate=>Mon Nov 11 2013 13:38:31 GMT+0800 (CST)

        size=>54546

        type=>image/png

        webkitSlice=>function webkitSlice() { [native code] }

        */

        var myImg=document.getElementById('myImg').files[0];

        var pic=document.createElement('img');

        //把二进制对象读成浏览器能够识别的对象;

        //Safari竟然不支持URL.createObjectURL()方法,Chrome支持

        pic.src=window.URL.createObjectURL(myImg);

        pic.style.width='100px';

        pic.style.height='100px';

        file_msg.innerHTML="文件的大小是"+parseInt(myImg.size)+'M'+'<br/>'+'图片的名字是:'+myImg.name;

        document.body.appendChild(pic);

    }

}

</script>

<style>

#file_msg{

    width:150px;

    height:150px;

    border:1px solid green;

}

</style>

<body>

<form id='myform'>

    <div id='file_msg'></div>

    <input type='file' name='myImg1' id='myImg'/><br/>

    <input type='button' value='确认' id='btn'/>

</form>

</body>

</html>

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)的更多相关文章

  1. 关于利用input的file属性在页面添加图片的问题

    在页面添加图片涉及到兼容的问题怎么解决兼容问题呢?请看下面分析: 在IE浏览器上面我们能直接通过获取其input的value值来获取其图片的路径. 在火狐和谷歌需要用createObjectURL(( ...

  2. HTML5利用FormData对象实现显示进度条的文件上传

    摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错 完整简约的解决方案 下面的代码清单是包括 ...

  3. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  4. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  5. 利用html5的FormData对象实现多图上传

    <html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...

  6. php 下 html5 XHR2 + FormData + File API 上传文件

    FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...

  7. HTML5 FormData对象

    利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...

  8. 有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  9. Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

随机推荐

  1. QT常用资料

    QTableView介绍 Qt 自定义 滚动条 样式 QTableWidget控件总结  QTableWidget的使用和美工总结 QT__stylesheet__操作 QSS QT皮肤(QSS)编程 ...

  2. Ext.Net 学习随笔 003 Panel基本使用

    Panel() 1.使用Content和Html属性设置Panel内容 前台View代码 @(X.Panel() .ID("panel1") .Width() .Height() ...

  3. Sql server 2008 R2 实现远程异地备份

    1. 环境: a)两台同样的Sql Server 2008 R2 服务器 b)操作系统都是windows 2008 c)需要将102.108.0.1数据库MSGC远程备份到112.118.0.2的服务 ...

  4. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  5. Ubuntu 14.04 (Trusty Tahr) LTS发布，附下载地址，各种镜像【bubuko.com】

    Ubuntu 14.04 有很多的改进和新功能: 同时还发布几个不同版本:Ubuntu GNOME.Kubuntu.Xubuntu.Lubuntu.Edubuntu.Ubuntu Kylin.Ubun ...

  6. 01 Linux档案与目录管理

      1. 目录与路径 1.1绝对路径和相对路径         绝对路径:一定有根目录/写起,例如:/usr/share/doc         相对路径:不是由根目录/写起,例如:由/usr/sha ...

  7. 使用ionic framework创建一个简单的APP

    ionic是一个以cordova为基础的html5前端框架,功能强大,能够快速做出与原生开发相似的应用. 一,安装和配置 1,安装(前提:cordova环境配置完成) npm install -g i ...

  8. Codeforces Round #381 (Div. 2)C. Alyona and mex(思维)

    C. Alyona and mex Problem Description: Alyona's mother wants to present an array of n non-negative i ...

  9. SQL数据库添加新账号，只操作指定数据库

    思路: 1.创建数据库服务器登录用户 2.创建指定数据库的用户,并且和服务器用户联系起来 3.给数据库的用户添加角色 代码实现: 1.创建名为login的服务器登录用户dba,尼玛dbpwd,默认数据 ...

  10. 分配和释放 BSTR 的内存

    本文档已存档,并且将不进行维护. 分配和释放 BSTR 的内存 Visual Studio .NET 2003                  转自: https://msdn.microsoft. ...