<!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. $watch和$observe的使用

    $observe 是Attribute对象的一个方法,用来监听DOM中属性值的变化.比如 attr1="{{name}}" Attribute定义在directive中的link函 ...

  2. 【windows server 2008R2】windows server 2008R2自动重启

    客户反映2018.3.20早上8点多数据库重启. 我找了半天原因,看了一下告警日志没发现什么问题.后来我再跟他确认,他说他练上去的时候正在准备桌面.这感觉像是服务器重启导致数据库重启. 于是我远程上去 ...

  3. Linux下nginx编译安装教程和编译参数详解

    这篇文章主要介绍了Linux下nginx编译安装教程和编译参数详解,需要的朋友可以参考下 一.必要软件准备1.安装pcre 为了支持rewrite功能,我们需要安装pcre 复制代码代码如下: # y ...

  4. Jsp中格式化时间戳的常用标签

    接下来一段时间的记录,虽然不是一些什么全新的知识,但是作为后台开发人员都是应该必须掌握的前端基础技能,说实话,每一个后台程序员的短板就在于前端技能的弱而造就了不能更上一层楼.从今天开始,我将彻底开启菜 ...

  5. 微信小程序充值及充值回调后的处理

    微信小程序的充值流程与 H5 或 公众号大致差不多,这里简单说一下前端在充值时候的一些操作流程. 用户在小程序中发起充值请求时,一般会先请求自己的服务器,将充值的参数发送给后端,然后后端会去请求微信充 ...

  6. ffmpeg 踩坑实录 添加实时水印（二）

    一.背景介绍 最近领导要求做一个视频录制的相关项目.其中,需要对视频文件进行添加 实时时间水印.于是,我想到了使用之前的ffmpeg来做. 二.ffmpeg实际操作 首先把需要添加水印的视频文件,上传 ...

  7. [PLC]ST语言六：DI/EI/FEND/WDT/FOR/NEXT

    一:DI/EI/FEND/WDT/FOR/NEXT 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言:

  8. Mysql优化之索引

    前言 这几天抽了个时间将<高性能Mysql>看了一下忽觉索引非常之重要,习之然后总结巩固知识.本文索引使用的是InnoDB存储引擎.因为本文并不是说用索引的好处,所以并不会书写QPS之类的 ...

  9. 《杜增强讲Unity之Tanks坦克大战》8-子弹碰撞处理

    8 子弹碰撞处理 为了处理子弹打到坦克的伤害我们在这里新建一个Shell.cs 子弹有两种情况,碰到坦克炸开,没有碰到坦克则过2s子弹销毁. void Start () { Destroy (game ...

  10. mac指令备忘

    在这里简单记录下最近使用的快捷键,备忘,随时更新. 简单指令记录 mkdir 创建路径 pwd 输出当前路径 ls 查看目录 cd touch 创建文件 tree 输出目录树 mv 源文件 目标文件或 ...