发这篇博客的时候我是自己在研究这个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. VisualSVN_Server安装_配置图文教程

    前言: 不错的文章 对一个我这样的菜鸟来说,这个教程很容易理解,说它图文并茂并不为过.所以就把它整理成了文档,给大家分享. 文章版权归原作者Forrest Zhang所有. 原文出处: http:// ...

  2. （转载）用PHP正则表达式清除字符串的空白

    (转载)http://www.chinaz.com/program/2009/0220/67569.shtml 我们经常会处理来自用户输入或从数据库中读取的数据,可能在你的字符串中有多余的空白或制表符 ...

  3. 用DELPHI操作EXCEL Word

    用DELPHI操作EXCEL 在DELPHI中显示EXCEL文件,可用以下简单代码做到.但要实用,则需进一步完善. var  Form1: TForm1;  EApp:variant;implemen ...

  4. Remove Linked List Elements——LeetCode

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  5. Nodejs in Visual Studio Code 14.IISNode与IIS7.x

    1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...

  6. 更新一波题解（最近做的三个dp题）

    很久没写题解了,去ec之前来填一填坑,希望能攒攒人品... 首先是去年上海F题..uvalive7143 题意: 给n个人分 m间房子,每个房间的容量是已知的,其中有k对双胞胎,双胞胎可以看作相同的人 ...

  7. VK Cup 2015 - Round 1 -E. Rooks and Rectangles 线段树最值+扫描线

    题意: n * m的棋盘, k个位置有"rook"(车),q次询问,问是否询问的方块内是否每一行都有一个车或者每一列都有一个车? 满足一个即可 先考虑第一种情况, 第二种类似,sw ...

  8. Ancient Message (古埃及象形文字识别 Uva 1103)

    原题:https://uva.onlinejudge.org/external/11/1103.pdf 给一幅图(16进制), 判断图中有哪些象形文字. 只识别 这6个就可以 示例: 将16进制数据 ...

  9. 《JavaScript语言精髓与编程实践》读书笔记二

    第3章非函数式语言特性 这一章首先介绍了语言的分类,命令式(结构化编程,面向对象编程),说明式(函数式等).而这一章,主要介绍JS的非函数式特点. 在开始之前,首先介绍了由“结构化编程”向“面向对象编 ...

  10. angular ng-class使用笔记

    在前面Angularjs开发一些经验总结中说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO( ...