js异步上传图片
<!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异步上传图片的更多相关文章
- 异步上传图片，光用jquery不行，得用jquery.form.js插件
异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...
- js 原生 ajax 异步上传图片
<script type="text/javascript"> function upload() { var file1 = document.getElementB ...
- Jquery实现异步上传图片
利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- 利用KindEditor的uploadbutton实现异步上传图片
利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最经常使用的方法就是图片在iframe中上传.这样仅仅须要刷新iframe.而不用刷新整个页面. KindEdi ...
- php结合jquery异步上传图片（ajaxSubmit）
php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- asp.net MVC Ajax.BeginForm 异步上传图片的问题
当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...
- C# 异步上传图片案例
好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...
- 使用Ajax异步上传图片的方法(html,javascript,php)
前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...
随机推荐
- Direct3D中 SetStreamSource 函数与数据流
Microsoft? DirectX? 8.0引入了数据流的概念,用来把数据绑定到着色器使用的输入寄存器.一个数据流是一个成员数据的数组,每个成员由一个或多个元素构成,这些元素代表单个实体,如位置.法 ...
- 【CJOJ2433】陌上花开 CDQ分治
[CJOJ2433]陌上花开 CDQ呲嘚秋分治 WA果然呲嘚秋分治跑得比树套树还快!!!(md理论复杂度不是一样的吗) 但树套树不知道比呲嘚秋高到哪里去辣装X用 Orz hzwer 第一维sort,第 ...
- CSS快速入门-定位布局(九宫格)
实现效果图: 看上去是不是很屌的样子?其实实现起来主要就是用到了一个float,不难. 实现步骤:1.新建一个大div,300*30002.里面放5个小div,100*1003.将div定位
- 无监控不运维——使用 Python 写一个小小的项目监控
在公司里做的一个接口系统,主要是对接第三方的系统接口,所以,这个系统里会和很多其他公司的项目交互.随之而来一个很蛋疼的问题,这么多公司的接口,不同公司接口的稳定性差别很大,访问量大的时候,有的不怎么行 ...
- layer.msg(msg, time, parme)设置图标问题
layer.msg只提到3个参数,实际上有第4个参数,第4个参数就是msg关闭后执行的回调. layer.msg('提示', 2, 1, function(){}) 第一个参数:提示 第二个参 ...
- java基础解析系列(三)---HashMap
java基础解析系列(三)---HashMap java基础解析系列 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)-- ...
- 【转】Linux - CentOS 7网络配置
Linux - CentOS 7网络配置 https://blog.csdn.net/J080624/article/details/78083988 安装完VM后,需要进行网络配置.第一个目标为 ...
- alibaba/fescar 阿里巴巴 开源 分布式事务中间件
Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务 0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 示例:https://github.com/windwant/ ...
- asp.net core如何修改程序监听的端口
asp.net core 默认监听的5000和5001端口,要修改为其他端口有几种方法. 1.硬编码.优点是直观,缺点是每次修改端口都得重新编译程序. public class Program { p ...
- 分享一个查找linux命令的网站
http://man.linuxde.net/ 不用每次都找度娘浪费时间了