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

兼容 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. session再次理解

    1.session介绍: session主要用来存储用户的会话所需的信息(用户行为信息),当用户在同一个服务器上实现不同的操作时,session信息会以变量的形式存储在服务器的内存中,保存用户的状态信 ...

  2. xamarin.IOS App闪退日志----crash

    一.查找日志文件位置:通过xcode/windows/device/你的IPhone/crash 二.拿到日志可以直接查看,但是日志记录太乱看不懂,需要转换处理,查找.DSYM文件,文件位置:/Use ...

  3. [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 ...

  4. 10.【nuxt起步】-引用mintui

    这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...

  5. Direct2D教程(十二)图层

    什么是Layers? Layer,中文译成图层,在Direct2D中可以用来完成一些特殊效果,使用Layer的时候,先将Layer Push到render target,然后进行绘制,此时是直接绘制在 ...

  6. JMeter 压力測试使用函数和 CSV 文件參数化 json 数据

            在 http Load Testing 中.json 数据的提交是个让人头疼的问题.本文具体介绍怎样进行 JMeter 的 json 測试提交,以及怎样将其參数化.        St ...

  7. 百科知识 华为手机P7如何更换电池

    参考下面 教程 https://item.jd.com/3265516.html  

  8. jQuery中的:input选择器

    jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> < ...

  9. 几个关于tableView的问题解决方式整合

    近期遇到关于tableView的问题的整合.部分比較白痴.仅仅是初学easy犯~ 1.关于tableView左边空余15像素的问题. 2.关于tableView多余切割线隐藏的问题: 3.关于tabl ...

  10. linux之return和exit引发的大问题(vfork和fork)

    在coolshell.cn上看到的一个问题.为此拿来研究一下. 首先 看看return和exit的差别 在linux上分别跑一下这个代码 int main() { return 0; //exit(0 ...