发这篇博客的时候我是自己在研究这个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. 实战weblogic集群之安装weblogic

    一.系统及软件版本 OS版本:Red Hat Enterprise Linux Server release 6.6WebLogic Server 版本: 10.3.3.0JDK版本:1.7.0_79 ...

  2. 【转】[Java] HashMap使用的示例

    原文网址:http://kings11347.blog.163.com/blog/static/56047032201212895416436/ import java.util.HashMap; i ...

  3. qemu kvm 虚拟化

    虚拟化: KVM是一个基于Linux内核的虚拟机,属于完全虚拟化.虚拟机监控的实现模型有两类:监控模型(Hypervisor)和宿主机模型(Host-based).由于监控模型需要进行处理器调度,还需 ...

  4. Java IO流以及装饰器模式在其上的运用

    流概述 Java中,流是一种有序的字节序列,可以有任意的长度.从应用流向目的地称为输出流,从目的地流向应用称为输入流. Java的流族谱 Java的 java.io 包中囊括了整个流的家族,输出流和输 ...

  5. String Problem - HDU 3374 (kmp+最大最小表示)

    题目大意:有一个字符串长度为N的字符串,这个字符串可以扩展出N个字符串,并且按照顺序编号,比如串  ” SKYLONG “ SKYLONG 1 KYLONGS 2 YLONGSK 3 LONGSKY ...

  6. Servlet工作原理

    Servlet生命周期分为三个阶段: 1,初始化阶段  调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...

  7. DCL双检查锁机制实现的线程安全的单例模式

    public class MyObject { private volatile static MyObject myObject; private MyObject(){} public stati ...

  8. appium点击屏幕(手势)

    在android测试过程中,会遇到要点击一下屏幕的需求. 在appium旧版本使用下面代码点击android屏幕,没有报错.Map tap = new HashMap(); tap.put(" ...

  9. Swift-Lesson2(下)

  10. C++类的成员函数(在类外定义成员函数、inline成员函数)

    类的成员函数(简称类函数)是函数的一种,它的用法和作用和前面介绍过的函数基本上是一样的,它也有返回值和函数类型,它与一般函数的区别只是:它是属于一个类的成员,出现在类体中.它可以被指定为private ...