发这篇博客的时候我是自己在研究这个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. hdu-1890-Robotic Sort splay区间翻转

    题意: 依次找第i大的数下标pos[i],然后将区间[i,pos[i]]翻转 分析: splay树区间翻转 // File Name: ACM/HDU/1890.cpp // Author: Zlbi ...

  2. Cent OS 命令行和窗口界面默认登录切换方法

    在 CentOS 中的修改方法如下: 1. root登陆,免得老是sudo 2. 打开/etc/inittab 文件     #vim /etc/inittab 3. 在默认的 run level 设 ...

  3. 数学计数原理（Pólya）：POJ 1286 Necklace of Beads

    Necklace of Beads Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7763   Accepted: 3247 ...

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

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

  5. 数学（FFT）：BZOJ 3527 [Zjoi2014]力

    题目在这里:http://wenku.baidu.com/link?url=X4j8NM14MMYo8Q7uPE7-7GjO2_TXnMFA2azEbBh4pDf7HCENM3-hPEl4mzoe2w ...

  6. i++和++i的老问题

    对于++j,该式是指先将j的值自加1,然后再取j的值.自增过后参与计算 i的值也为10:对于i++,该表达式是指先取i的值做运算,再将i加1.参见过计算后再自增

  7. 《Mathematical Olympiad——组合数学》——抽屉原理

    抽屉原理可以说是组合数学中最简单易懂的一个原理了,其最简单最原始的一个表达形式:对于n本书放到n-1个抽屉中,保证每个抽屉都要有书,则必存在一个抽屉中有2本书.但是这个简单的原理在很多问题中都能够巧妙 ...

  8. 《Mathematical Olympiad——数论》——整除

    数论这个东西吧,虽说也是高中IMOer玩的数学游戏,颇具美学性的证明比较多.就目前所知,它在算法里是一些加密技术的基础,不多言,开始具体题目的分析. 问题一:已知数列{an},且a0 = 2 , a1 ...

  9. nginx 配置301转发

    学习nginx 推荐 http://www.nginx.cn/nginx-how-to 1. 设置域名解析 daijun.me 指向 234.33.22.21 2.主机234.33.22.21 ngi ...

  10. js~一个列表中包含上移下移删除等功能

    最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块 先看一下页面的截图