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检测是否是手机平台
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(JQuery.js)上传进度条
- baguetteBox.js响应式画廊插件(纯JS)
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- 单线程的Node.js是如何实现高并发的
- js压缩上传图片base64长度
- js-ECMAScript-3:运算符和流程控制
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- [Node.js]24. Level 5: Express, Express routes
- js链式调用
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- atitit.javascript js 上传文件的本地预览
- 华为OD机试 - 字符串排序(Java & JS & Python)
- js禁止复制页面内容
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
- JS:ES6(ES2015)新特性之常量、箭头函数、解构赋值
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- springmvc环境下使用ajaxfileupload.js进行文件上传
- js上传图片预览
- js图片上传预览
- createobjbyreplace(str,arr) js替换方法保存
- js删除数组的某一项
- node.js 获取url中的各个参数