发这篇博客的时候我是自己在研究这个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. 有两个指针pa，pb分别指向有两个数，a,b，请写一个函数交换两个指针的指向，也就是让pa指向b,让pb指向a

    题目:有两个指针pa,pb分别指向有两个数,a,b,请写一个函数交换两个指针的指向,也就是让pa指向b,让pb指向a,具体实现如下: #include<stdlib.h> #include ...

  2. POJ 3189 Steady Cow Assignment

    题意:每个奶牛对所有的牛棚有个排名(根据喜欢程度排的),每个牛棚能够入住的牛的数量有个上限,重新给牛分配牛棚,使牛棚在牛心中的排名差(所有牛中最大排名和最小排名之差)最小.   题目输入: 首先是两个 ...

  3. PowerDesigner自定义Word导出格式

    本文主要讲解如何将PDM的表结构导出成word以及如何自定义导出格式和显示效果,希望对大家有所帮助...(以下步骤以PowerDesigner 15版本为例) 一.新建导出报表,进入报表设计界面: 1 ...

  4. wamp中的httpd.conf文件设置

    ServerName localhost 缺省情况下,并不需要指定这个ServerName参数,服务器将自动通过名字解析过程来获得自己的名字,但如果服务器的名字解析有问题(通常为反向解析不正确),或者 ...

  5. centos 5 yum安装与配置vsFTPd FTP服务器

    vsftpd作为FTP服务器,在Linux系统中是非常常用的.下面我们介绍如何在centos系统上安装vsftp. 什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...

  6. pl sql developer登陆界面找不到oracle数据库选项

    window 64位的操作系统 装的数据库win64_11gR2的数据库,PL SQL是PLSQL Developer 7.1.5最后是下载了一个instantclient_11_2包将你数据库安装路 ...

  7. nginx 代理概念理解

    学习nginx http://www.nginx.cn/nginx-how-to nginx官方定义: Nginx 是一个高性能的 Web 和反向代理服务器. 首先明确一个概念 反向代理 反向代理(R ...

  8. tyvj1728 普通平衡树

    为了彻底理解树状数组,试着用树状数组做了下普通平衡树 而树状数组只能离线做,或者保证值的大小在数组可承受的范围内也是可以的,因为要求离线是因为必须事前对所有数离散化. 然后我们看刘汝佳蓝书上的图 利用 ...

  9. 山东省赛A题：Rescue The Princess

    http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=3230 Description Several days ago, a beast caught ...

  10. PHP安全编程：跨站请求伪造CSRF的防御(转)

    跨站请求伪造(CSRF)是一种允许攻击者通过受害者发送任意HTTP请求的一类攻击方法.此处所指的受害者是一个不知情的同谋,所有的伪造请求都由他发起,而不是攻击者.这样,很你就很难确定哪些请求是属于跨站 ...