发这篇博客的时候我是自己在研究这个XMLHttpRequest请求，在别人的博客上面知道XMLHttpRequest新加了一个FormData的东西，好像现在APP请求后台也有用这种方式的吧。

别的不多说，我一直在纠结js怎样获取到form表单中file类型的值，或者说是数据。一直没有找到方法，前两天看了一个博客，他是通过Form表单来初始化FormData，得到 一个对象然后通过Ajax方式将文件数据发送到PHP文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试FormData方式上传文件</title>

    <style>

        body{margin: 0;padding: 50px 0 0 0;}

        .topDiv{margin-left: 40%; margin-top: 200px; float: left; position: absolute;}

        .topDiv ul li{list-style: none; margin-top: 10px;}

        .topDiv ul li label{color: #999;}

        .topDiv ul li input{width: 150px;}

    </style>

</head>

<body>

<div class="topDiv" align="center">

    <form>

        <ul>

            <li>

                <label>图片名称:</label>

                <input type="text" name="name" id="name" value="">

            </li>

            <li>

                <label>图片上传:</label>

                <img src="http://usr.im/100x50" width="150" height="100">

            </li>

            <li>

                <input type="button" onclick="onFormPost()" value="提交">

            </li>

        </ul>

    </form>

    <form id="formData" style="display: none">

        <ul>

            <li>

                <label>选择图片:</label>

                <input type="file" name="file" onchange="onFormPost()" value="">

            </li>

        </ul>

    </form>

</div>

</body>

<script type="text/javascript" src="../Public/js/jquery-2.1.4.min.js?ver=1"></script>

<script>

    function onFormPost(){

        var myForm=new FormData(document.getElementById('formData'));

//        myForm.append("name",document.getElementById('name').value);

//        myForm.append("file",document.getElementsByName("file").files[0])

//        var myXhr=new XMLHttpRequest();

//        myXhr.open("post","upload.php");

//        myXhr.send(myForm);

        $.ajax({

            url: "upload.php",

            type: "POST",

            data: myForm,

            processData: false,  // 告诉jQuery不要去处理发送的数据

            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头

            success:function(data){

                alert(data);

            },error:function(){

            }

        });

    }

</script>

</html>

然后只需要在upload.php文件处理上传

ajax+XMLHttpRequest里的FormData实现图片异步上传的更多相关文章

  1. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  2. formData 无需form异步上传多个图片

    上周帮其它公司套一下一个web端微信投票系统的后台接口,遇到了一个图片以及视频上传报名的小问题,网上实现方式有很多但都不是ui上面的效果,于是自己动手改造了一个.先来看看效果图 流程很简单,就是点击每 ...

  3. Ajax图片异步上传并回显

    1.jsp页面 <td width="20%" class="pn-flabel pn-flabel-h"></td> <td w ...

  4. 一个完整的springmvc + ajaxfileupload实现图片异步上传的案例

    一,原理 详细原理请看这篇文章 springmvc + ajaxfileupload解决ajax不能异步上传图片的问题.java.lang.ClassCastException: org.apache ...

  5. asp.net使用jquery.form实现图片异步上传

    首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...

  6. Android -- 图片异步上传到PHP服务器

    背景                                                                                           网上很多上传到 ...

  7. jquery 和 FormData 最简单图片异步上传

    <script src="/scripts/jquery/jquery-3.1.1.min.js"></script> <script type=&q ...

  8. laravel + html ajax 多表单字段和图片一起上传

    $("#article_push").on('click', function (e){ e.preventDefault(); var stylestr = $('#summer ...

  9. PHP JS JQ 异步上传并立即显示图片

    提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > ...

随机推荐

  1. -_-#【Better JS Code】严格模式

    要在整个脚本中启用严格模式,可以在顶部添加如下代码: "use strict"; 这行代码看起来像是字符串,而且也没有赋值给任何变量,但其实它是一个编译指示,用于告诉支持的 Jav ...

  2. 数据结构（Splay平衡树）：HAOI2008 排名系统

    [HAOI2008] 排名系统 [题目描述] 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录 ...

  3. 【数论】【扩展欧几里得】Codeforces 710D Two Arithmetic Progressions

    题目链接: http://codeforces.com/problemset/problem/710/D 题目大意: 两个等差数列a1x+b1和a2x+b2,求L到R区间内重叠的点有几个. 0 < ...

  4. Storm-1.0.1+ZooKeeper-3.4.8+Netty-4.1.3 HA集群安装

    Storm-1.0.1+ZooKeeper-3.4.8+Netty-4.1.3 HA集群安装 下载Storm-1.0.1 http://mirrors.tuna.tsinghua.edu.cn/apa ...

  5. javaweb笔记5之请求编码问题

    post提交: 设置实体内容的编码:request.setCharacterEncoding("utf-8"); 注意:一定要在获取所有参数之前设置,否则设置无效! get方式提交 ...

  6. Redis sort命令

    http://www.cnblogs.com/linjiqin/archive/2013/06/14/3135921.html 1.添加 投票选项到 redis的  List 和HashMap lis ...

  7. C#实现文件数据库

    本文转载:http://www.cnblogs.com/gaochundong/archive/2013/04/24/csharp_file_database.html#commentform 本文为 ...

  8. 自我理解foreach工作原理

        很多时候我们在使用for循环遍历一个数组的时候,我们都知道可以通过下标的索引找到当前数组中所对应的数据.这只对于简单的数组或集合,如果我们存储的数据不止只有数据项,还有一个标识项,就如同Has ...

  9. @property的特性

    @property还有一些关键字,它们都是有特殊作用的,比如上述代码中的nonatomic,strong: 1 2 @property(nonatomic,strong) NSString *carN ...

  10. PuTTY？Bash？Out了！！！终端应该这么玩~

    由于语言的障碍,国内一直存在一个问题,就是新技术引入太慢.比如PuTTY,其实已停止维护N久了,但大部分人却仍然在用(包括之前的我).比如Bash,明知有那么多的问题,却一直没有什么想法,似乎Linu ...