发这篇博客的时候我是自己在研究这个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. 杂题 UVAoj 107 The Cat in the Hat

     The Cat in the Hat  Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...

  2. FZYZOJ-1578 [NOIP福建夏令营]数列分段

    P1578 -- [NOIP福建夏令营]数列分段 时间限制:1000MS      内存限制:131072KB 状态:Accepted      标签:    二分   无   无 Descripti ...

  3. Android中ListView分页加载数据

    public class MainActivity extends Activity { private ListView listView=null; //listview的数据填充器 privat ...

  4. poj1026

    题目大意:暗号 Bod 和 Alice 计划使用一种全新的编码方案,令人惊讶的是这不是一个公开的公匙密码,但是他们的编码基于密匙,在Philadelphia on February 16th他们的会议 ...

  5. SQL随笔

    多表分页查询: ,; 向表中插入新的字段: ALTER TABLE `Table_name` ) NOT NULL DEFAULT '' AFTER `id`;  更新表数据: UPDATE [LOW ...

  6. 获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox

    var html = $(this).html();if(html){ var lineSign = html.indexOf('<div>'); if(html.indexOf('< ...

  7. 网络编程---(数据请求+slider)将网络上的大文件下载到本地，并打印其进度

    网络编程---将网络上的大文件下载到本地,并打印其进度. 点击"開始传输"button.将网络上的大文件先下载下来,下载完毕后,保存到本地. UI效果图例如以下: watermar ...

  8. linux两台server远程copy文件

    1.将远程机器的文件copy到本地 scp -r  root@10.10.15.25:/bea   /gg   将远程的/bea copy到/gg以下 -r  Recursively copy ent ...

  9. 一些Linux优化方法

    1. 利用栈做备胎,减少分配空间的几率,IO自己有一份缓存,如果超了就使用stack空间 2. 分散IO:代表readv,可以通过一次系统调用,将内容读到分散的缓存中,可以减少系统的系统调用

  10. iOS 如何优雅的处理“回调地狱Callback hell”(一) (下)

    了解完流程之后,就可以开始继续研究源码了.在PromiseKit当中,最常用的当属then,thenInBackground,catch,finally - (PMKPromise *(^)(id)) ...