上传图片,转载请注明出处!!!

兼容 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 火狐的更多相关文章

  1. CSS美化 input type=file 兼容各个浏览器(转)

    HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...

  2. 改变input[type=file]的默认样式

    自定义上传按钮样式的终极解决方案--input透明法 <style> .div1{ float: left; height: 41px; background: #f5696c; widt ...

  3. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. <input type="file">火狐兼容

    <input type="file">放着a标签下火狐不兼容 <a href=""><input type="file& ...

  5. 关于PHP HTML <input type="file" name="img"/>上传图片,图片大小,宽高,后缀名。

    在我们的系统中,不免要上传图片,视频等文件,在上传中,需要做的一些判断,文件大小等方面. 注意: 在php.ini 中的post_max_size,upload_max_filesize默认为2M,在 ...

  6. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  7. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  9. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

随机推荐

  1. 【maven】架包下载失败,maven引入架包失败,pom文件未报错,但是引用的注解找不到

    出现这种问题 看到这个jar包显示是unkown,不知道版本,所以这样的解决方法就是 1.先查看maven设置是使用的自定义的仓库还是默认的仓库 2.删除掉你引用的jar包下载失败的文件夹 3.然后重 ...

  2. 调用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) ...

  3. SilverLight:基础控件使用(5)-TreeView控件-基本使用

    ylbtech-SilverLight-Basic-Control:基础控件使用(5)-TreeView控件-基本使用 前台编辑 后台逐个添加 后台绑定数据源 1.A,返回顶部TreeView控件(树 ...

  4. 如何用迅雷下载在网页中的Flash动画或课件

    对于框架网页而言,看地址栏可以发现后缀不是SWF,就是说该网站没有直接把Flash给你,右击该Flash也没有下载选项.   此时虽然右下角是Flash,但是左边和上面网页部分还是正常的元素,右击这些 ...

  5. -webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅

    前段时间,依照美拍的视频效果写了一个效果类似的网页版的动画. 电脑上安装了三种浏览器:IE.Chrome.Firefox.分别作了測试,结果显示Chrome在这方面的渲染效果最差.常常出现卡顿现象.f ...

  6. linux查看命令总结

    通过命令+文件名查看内容.如下命令可以查看.1, cat :由第一行开始显示文件内容:2,tac:从最后一行开始显示,可以看出tac与cat字母顺序相反:3,nl:显示的时候输出行号:4,more:一 ...

  7. Windows 系统 vs2012 MinGW 编译ffmpeg 静态库

    Windows系统下 vs2012编译ffmpeg 动态库 前面已经有文章讲述,本文将讲述如果编译生成ffmpeg静态库以方便 在vs2012下调用. 准备工作:安装MinGW环境,修改ffmpeg配 ...

  8. web前端面试系列 - js中的prototype

    js中一切皆为对象,其中函数也是一种对象, 而每个函数都有一个prototype属性,其值也是一个对象. 一.prototype的作用 1. 在多个实例对象之间共享数据和方法. 2. 通过原型链实现继 ...

  9. Gson解析数组和list容器

    Gson解析数组和list容器 使用Gson解析首先须要增加架包文件:gson-2.2.4.jar 定义一个类Student: public class Student { String name=& ...

  10. Ubuntu16.04下Django项目的部署

    起飞前的准备 # 首先在Ubuntu的当前用户zhang下新建data文件夹,然后在data文件夹下新建你的项目目录root@zhang-virtual-machine:/home/zhang/dat ...