input file图片上传FormData

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

$("#updatepic").on("change", function(e) {
    var file = e.target.files[0];
    var fd = new FormData();
    if (file.size < 4194304) { //判断文件大小
        fd.append("UserName", "wangteng");
        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
            }
        });
    }
});

附:

ajax错误 Uncaught TypeError: Illegal invocation (未捕获类型错误:非法调用)

这种错误可以参考:可能是应为 contentType: false,processData: false 没有加

检查jQuery的文档后发现,如果它不是一个字符串,jQuery的尝试将数据转换成一个字符串。因此,我们需要增加一个选项:processData:false,在这里告诉jQuery不要碰我的数据!另一种选择的contentType:false以防止jQuery来为你添加一个Content-Type头,否则字符串将被丢失和上传失败。

时间: 2024-10-28 22:22:07

input file图片上传FormData的相关文章

input file图片上传预览

两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && file

input file图片上传预览js实现

js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && fileObj.files[

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

转:input[&#39;file&#39;] 美化上传【1】

css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 256083次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[type=file] 样式美化,input上传按钮美化. 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮

PHP 多input file文件上传

前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="multipart/form-data"> <input class="imagesUpload" type="file" name="imagesUpload[]" style="width: 152px;"/

.Net Core 图片上传FormData和Base64

缓冲和流式传输是上传文件的两种常用方案,这里主要演示流式传输. 1.Net Core MVC Form提交方式: 前端页面 form表单提交: 1 <form id="uploadForm"> 2 图片上传: <input type="file" name="file" multiple value="选择" onchange="doUpload()" id="ajaxfile&

javascript input file文件上传

<body> <input type="file" id="myFile" onchange="beforeUpload()"> <button onclick="selectFile()">上传</button> <script> var fileInput = document.getElementById("myFile"); // 选择上传

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制. 下面我用javascript来控制文件上传的大小和类型. 贴出html代码: <form action="后端接口" enctype="multipart/for

input(file)异步上传文件

页面 <input id="file" name="file" type="file"><button id="btn" type="button">上传</button> //异步上传文件var $file = $('#file');$('#btn').click(function() { var data = new FormData(); data.append('