上传图片 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 文件类型, 默认 ...
随机推荐
- 【spring data jpa】使用spring data jpa时,关于service层一个方法中进行【删除】和【插入】两种操作在同一个事务内处理
场景: 现在有这么一个情况,就是在service中提供的一个方法是先将符合条件的数据全部删除,然后再将新的条件全部插入数据库中 这个场景需要保证service中执行两步 1.删除 2.插入 这两步自然 ...
- 安装惠普M1136打印机一直处于“新设备已连接”状态怎么办?
百度的答案是从控制面板的添加打印机入手,我试了遇到找不到设备的问题. 其实问题的原因是在安装驱动时一直把打印机到电脑的USB插着.我的解决方案是: 1.点击M1130MFP_M1210MFP开始安装, ...
- Go语言阅读小笔记,来自知呼达达关于unsafe.Pointer的分享.
第一式 - 获得Slice和String的内存数据 func stringPointer(s string) unsafe.Pointer { p := (*reflect.StringHeader) ...
- hihocoder 1032 manachar 求回文串O(n)
#include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...
- mvc已添加了具有相同键的项
异常详细信息: System.ArgumentException: 已添加了具有相同键的项. 场景重现:在地址栏输入 http://localhost:51709/Home/Index?user[0 ...
- POJ 3211 Washing Clothes(01背包)
POJ 3211 Washing Clothes(01背包) http://poj.org/problem?id=3211 题意: 有m (1~10)种不同颜色的衣服总共n (1~100)件.Dear ...
- caffe搭建--caffe在invidia+cpu 酷睿2Q9300 + ubuntu16.04.2上面的安装和编译过程
本文原创,转载请注明出处. ------------------------------------------------分割线-------------------------------- 概要 ...
- 图像处理之滤波---gabor
http://blog.csdn.net/xiaowei_cqu/article/details/24745945 小魏北大
- toad for oracle中文显示乱码
toad for oracle中文显示乱码 数据入库的时候中文显示正常,在toad for oracleclient和页面显示都是乱码!!! 原因:在数据入库时候出现的问题. 解决方式: 在系统变量中 ...
- 辛星浅析html5中的role属性
我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...