<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> </title>
<script type="text/javascript" src="jquery.js"></script>
<script type = "text/javascript" >
function ProcessFile( e ) {
var e= e||event;
var file = document.getElementById('file').files[0];

if ( file ) {

var reader = new FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;

var img = document.createElement("img");
img.src = txt;

img.style.cssText="width:100px;height:100px;border:1px solid red;"
document.getElementById("result").appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );

window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
var fd = new FormData();
var file =document.getElementById("file").files[0];
console.log(file)
fd.append('file',file);
$.ajax({
type:"post",
url:'a.php',
processData: false,
contentType: false,
data:fd,
success:function(data)
{

}
})
}
}
</script>
</head>
<body>
请选择一个图片: <input type = "file" id = "file" name = "file" />
<div id = "result"> </div>
<br>
<button id="btn1">上传 </button>
</body>
</html>

平时做表单都是跳转提交的，但是今天要做一个ajax图片异步上传，

网上搜索了下，方法都比较老了，居然还有用flash的，

普通的表单上传通过jquery的serialize()转换成querystring后就可以直接ajax post 上传，但是碰到文件上传就不奏效了，型号html5有个方法FormData()可以实现上传，

我写的代码如下：

function upThumbSubmit() {

if(!window.FormData) {　

        alert('your brower is too old');

        return false;

    }

 var formData = new FormData($( "#upForm" )[0]);

  $.ajax({

        url:'?c=api&a=upload',

        type:'post',

        data:formData,

        dataType:'json',

        success:function(data){

          alert(data);

          return false;

        }

  });

}

但是报错了，错误如下

TypeError: 'append' called on an object that does not implement interface FormData.

既然浏览器明明显示支持formdata,为何这里显示append不是formdata接口呢？

答案只可能是jquery重载了formdata

在里面加上2个option,就好了，正确代码如下

function upThumbSubmit() {

if(!window.FormData) {　

        alert('your brower is too old');

        return false;

    }

 var formData = new FormData($( "#upForm" )[0]);

  $.ajax({

        url:'?c=api&a=upload',

        type:'post',

        data:formData,

        processData: false,

        contentType: false,

        dataType:'json',

        success:function(data){

          alert(data);

          return false;

        }

  });

}

js异步上传图片的更多相关文章

  1. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  2. js 原生 ajax 异步上传图片

    <script type="text/javascript"> function upload() { var file1 = document.getElementB ...

  3. Jquery实现异步上传图片

    利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...

  4. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  5. 利用KindEditor的uploadbutton实现异步上传图片

    利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面.     KindEdi ...

  6. php结合jquery异步上传图片（ajaxSubmit）

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  7. asp.net MVC  Ajax.BeginForm 异步上传图片的问题

    当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...

  8. C# 异步上传图片案例

    好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...

  9. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

随机推荐

  1. c++ 常量指针

    一.指向常量的指针 定义形式: const 类型 * 指针名; 不能通过指针修改地址里的值. int i=0x123; const int *p=&i; *p=; //错误 //前置const ...

  2. 4 伪ajax：jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. 3832: [Poi2014]Rally

    3832: [Poi2014]Rally 链接 分析: 首先可以考虑删除掉一个点后,计算最长路. 设$f[i]$表示从起点到i的最长路,$g[i]$表示从i出发到终点的最长路.那么经过一条边的最长路就 ...

  4. 负载均衡@StackExchange.Redis实现Session外置--纯干货喂饱你

    Redis和StackExchange.Redis redis有多个数据库1.redis 中的每一个数据库,都由一个 redisDb 的结构存储.其中,redisDb.id 存储着 redis 数据库 ...

  5. 修复bug有哪些更快的技术？做好这6点就够了

    你有没有想过为什么有时修复错误似乎比它应该花费更长的时间?当你终于找到问题时,事实证明你所需要的只是一个小小的改变.然而,花了很多时间才能找到正在发生的事情.这种情况比我想象的更频繁. 另一方面,当您 ...

  6. charles抓包https/模拟弱网/设置断点重定向/压测

    charles几个常用功能   1,ios 抓包https网页:(如未配置,会显示unknown) 第一步是:给手机安装SSL证书 手机和电脑在同一wifi下,手机wifi配置http代理,ip是电脑 ...

  7. [Unity Shader] 逐顶点光照和逐片元漫反射光照

    书中的6.4节讲的是漫反射的逐顶点光照和逐片元光照. 前一种算法是根据漫反射公式计算顶点颜色(顶点着色器),对颜色插值(光栅化过程)返回每个像素的颜色值(片元着色器). 第二种算法是获得顶点的法线(顶 ...

  8. springboot 前后端分离开发 从零到整（四、更改密码操作）

    前端发送更改密码请求,头部携带token,服务端拦截器拦截头部token并解析,根据token中的信息来查询用户信息.需要登录才能进行的操作是由自己定的,有些操作可以直接放行.具体实现是: 上一章写到 ...

  9. SSH免密登录（并且免yes交互）

    问题描述:主机A使用ssh协议远程主机B,默认会开启口令认证,即输入主机B对应用户的登录密码,并且第一次登录时,主机A需验证是否接受来自主机B的公钥,输入"yes/no"完成交互. ...

  10. ClickOnce 创建桌面快捷方式

    static void Main() { bool bCreatedNew; Mutex m = new Mutex(false, "TestClickOnceClientName" ...