上传图片 ajax input type="file" 兼容 ie chroem 火狐
2016-05-09 15:30
597 查看
上传图片,转载请注明出处!!!
兼容 ie chroem 火狐
html:
jQuery Ajax:
html没有
附:
ajax错误 Uncaught TypeError: Illegal invocation (未捕获类型错误:非法调用)
这种错误可以参考:可能是应为 contentType: false,processData: false 没有加
检查jQuery的文档后发现,如果它不是一个字符串,jQuery的尝试将数据转换成一个字符串。因此,我们需要增加一个选项:processData:false,在这里告诉jQuery不要碰我的数据!另一种选择的contentType:false以防止jQuery来为你添加一个Content-Type头,否则字符串将被丢失和上传失败。
兼容 ie chroem 火狐
html:
<div id="uploadForm"> <input id="file" type="file"/> <button id="upload" type="button">upload</button> </div>
jQuery Ajax:
html没有
<form>标签,也没有
enctype="multipart/form-data"属性
<script> $(document).ready(function(){ $("#upload").on("click", function(e) { //触发方法1:按钮点击事件 var file=$('#file')[0].files[0]; upLoadFile(file); }); $("#file").on("change", function(e) { //触发方法2:监听file的change事件 var file = e.target.files[0]; upLoadFile(file); }); }); function upLoadFile(file){ var fd = new FormData(); if (file.size < 4194304) { //判断文件大小 (Ps. ie9下获取图片size $("#file").context.fileSize) fd.append("UserName", "Wt"); fd.append("Platform", 666); // 数字666被立即转换成字符串"666" fd.append("file", file); console.log(fd); $.ajax({ url: "/User/UploadAvatar", type: "POST", data: fd, contentType: false, //告诉jQuery不要去处理发送的数据(必需,不然报错) processData: false, //告诉jQuery不要去设置Content-Type请求头(必需,不然报错) success: function(result) { //成功do }, error: function(result) { //报错do } }); } } </script>
附:
ajax错误 Uncaught TypeError: Illegal invocation (未捕获类型错误:非法调用)
这种错误可以参考:可能是应为 contentType: false,processData: false 没有加
检查jQuery的文档后发现,如果它不是一个字符串,jQuery的尝试将数据转换成一个字符串。因此,我们需要增加一个选项:processData:false,在这里告诉jQuery不要碰我的数据!另一种选择的contentType:false以防止jQuery来为你添加一个Content-Type头,否则字符串将被丢失和上传失败。
相关文章推荐
- GitHub项目跟进
- Python 并发
- Android性能优化 一 数据优化
- PHP的curl常用的5个例子
- 链表——partition list
- http web服务器
- Android 一个改善的okHttp封装库
- 关于自定义listview,整合下拉刷新上拉加载功能,以及item侧滑功能,并且解决滑动冲突
- webapp之设计尺寸转编码所设尺寸
- Java JTable与滚动条JScollpane结合使用不能出现很想滚动条的解决办法
- php命名空间
- JazzyViewPager的使用
- CSU 1724 相等距离的和(离线+线段树)
- UML之时序图分析
- 使用CentOS Linux Bridge搭建Vxlan环境
- Linux安装Redis服务
- Java开发环境搭建全过程(附带视频)
- OpenCV之特征检测器(Feature Detector),描述子提取器(Descriptor Extractor)和描述子匹配器(Descriptor Matcher)
- 关于google一些网址
- nyoj5 Binary String Matching(KMP)