上传图片 ajax input type="file" 兼容 ie chroem 火狐
上传图片,转载请注明出处!!!
兼容 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头,否则字符串将被丢失和上传失败。
上传图片 ajax input type="file" 兼容 ie chroem 火狐的更多相关文章
- CSS美化 input type=file 兼容各个浏览器(转)
HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...
- 改变input[type=file]的默认样式
自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- <input type="file">火狐兼容
<input type="file">放着a标签下火狐不兼容 <a href=""><input type="file& ...
- 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。
在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
随机推荐
- 【maven】架包下载失败,maven引入架包失败,pom文件未报错,但是引用的注解找不到
出现这种问题 看到这个jar包显示是unkown,不知道版本,所以这样的解决方法就是 1.先查看maven设置是使用的自定义的仓库还是默认的仓库 2.删除掉你引用的jar包下载失败的文件夹 3.然后重 ...
- 调用tensorflow中的concat方法时Expected int32, got list containing Tensors of type '_Message' instead.
grid = tf.concat(0, [x_t_flat, y_t_flat, ones])#报错语句 grid = tf.concat( [x_t_flat, y_t_flat, ones],0) ...
- SilverLight:基础控件使用(5)-TreeView控件-基本使用
ylbtech-SilverLight-Basic-Control:基础控件使用(5)-TreeView控件-基本使用 前台编辑 后台逐个添加 后台绑定数据源 1.A,返回顶部TreeView控件(树 ...
- 如何用迅雷下载在网页中的Flash动画或课件
对于框架网页而言,看地址栏可以发现后缀不是SWF,就是说该网站没有直接把Flash给你,右击该Flash也没有下载选项. 此时虽然右下角是Flash,但是左边和上面网页部分还是正常的元素,右击这些 ...
- -webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅
前段时间,依照美拍的视频效果写了一个效果类似的网页版的动画. 电脑上安装了三种浏览器:IE.Chrome.Firefox.分别作了測试,结果显示Chrome在这方面的渲染效果最差.常常出现卡顿现象.f ...
- linux查看命令总结
通过命令+文件名查看内容.如下命令可以查看.1, cat :由第一行开始显示文件内容:2,tac:从最后一行开始显示,可以看出tac与cat字母顺序相反:3,nl:显示的时候输出行号:4,more:一 ...
- Windows 系统 vs2012 MinGW 编译ffmpeg 静态库
Windows系统下 vs2012编译ffmpeg 动态库 前面已经有文章讲述,本文将讲述如果编译生成ffmpeg静态库以方便 在vs2012下调用. 准备工作:安装MinGW环境,修改ffmpeg配 ...
- web前端面试系列 - js中的prototype
js中一切皆为对象,其中函数也是一种对象, 而每个函数都有一个prototype属性,其值也是一个对象. 一.prototype的作用 1. 在多个实例对象之间共享数据和方法. 2. 通过原型链实现继 ...
- Gson解析数组和list容器
Gson解析数组和list容器 使用Gson解析首先须要增加架包文件:gson-2.2.4.jar 定义一个类Student: public class Student { String name=& ...
- Ubuntu16.04下Django项目的部署
起飞前的准备 # 首先在Ubuntu的当前用户zhang下新建data文件夹,然后在data文件夹下新建你的项目目录root@zhang-virtual-machine:/home/zhang/dat ...