上传图片 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 文件类型, 默认 ...
随机推荐
- session再次理解
1.session介绍: session主要用来存储用户的会话所需的信息(用户行为信息),当用户在同一个服务器上实现不同的操作时,session信息会以变量的形式存储在服务器的内存中,保存用户的状态信 ...
- xamarin.IOS App闪退日志----crash
一.查找日志文件位置:通过xcode/windows/device/你的IPhone/crash 二.拿到日志可以直接查看,但是日志记录太乱看不懂,需要转换处理,查找.DSYM文件,文件位置:/Use ...
- [WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platform dependent!
一.背景 最近的项目在用maven 进行install的时候,发现老师在控制台输出警告:[WARNING] Using platform encoding (UTF-8 actually) to co ...
- 10.【nuxt起步】-引用mintui
这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...
- Direct2D教程(十二)图层
什么是Layers? Layer,中文译成图层,在Direct2D中可以用来完成一些特殊效果,使用Layer的时候,先将Layer Push到render target,然后进行绘制,此时是直接绘制在 ...
- JMeter 压力測试使用函数和 CSV 文件參数化 json 数据
在 http Load Testing 中.json 数据的提交是个让人头疼的问题.本文具体介绍怎样进行 JMeter 的 json 測试提交,以及怎样将其參数化. St ...
- 百科知识 华为手机P7如何更换电池
参考下面 教程 https://item.jd.com/3265516.html
- jQuery中的:input选择器
jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...
- 几个关于tableView的问题解决方式整合
近期遇到关于tableView的问题的整合.部分比較白痴.仅仅是初学easy犯~ 1.关于tableView左边空余15像素的问题. 2.关于tableView多余切割线隐藏的问题: 3.关于tabl ...
- linux之return和exit引发的大问题(vfork和fork)
在coolshell.cn上看到的一个问题.为此拿来研究一下. 首先 看看return和exit的差别 在linux上分别跑一下这个代码 int main() { return 0; //exit(0 ...