专栏首页kwcode通过Ajax方式上传文件(input file),使用FormData进行Ajax请求

通过Ajax方式上传文件(input file),使用FormData进行Ajax请求

<div  >
                        <input type="file" name="FileUpload" id="FileUpload">
                        <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a>
                    </div>
 <script type="text/jscript">

        $(function () {
            $("#btn_uploadimg").click(function () {
                var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
                if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                    alert("请选择图片");
                    return;
                }
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");   
                formFile.append("file", fileObj); //加入文件对象

                //第一种  XMLHttpRequest 对象
                //var xhr = new XMLHttpRequest();
                //xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
                //xhr.onload = function () {
                //    alert("上传完成!");
                //};
                //xhr.send(formFile);

                //第二种 ajax 提交

                var data = formFile;
                $.ajax({
                    url: "/Admin/Ajax/VMKHandler.ashx",
                    data: data,
                    type: "Post",
                    dataType: "json",
                    cache: false,//上传文件无需缓存 
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须 
                    success: function (result) {
                        alert("上传完成!");
                    },
                }) 
            }) 
        })

    </script>

补充 IE8 不支持.files 写法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • asp.net动态增加服务器端控件并提交表单

    为什么要用原生的呢? 1、目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 。需要考虑到市面上的其他垃圾浏览器。  2、性能不好 如果不考虑第一条 你...

    纯粹是糖
  • mvc路由配置.html结尾的伪静态

        mvc 标准的写法 通常是(http://localhost:8149/Home/Index) 路由配置如下: ?     有时候需求 如 http:/...

    纯粹是糖
  • JS禁止鼠标右键、禁止全选、复制、粘贴的方法(所谓的防盗功能)

    简述:一个防君子不防小人的鸡肋的功能,针对小白还行。 代码如下: <script> //都能支持 document.oncontextmenu = f...

    纯粹是糖
  • 空气质量指数计算

    这次只是分享一个计算AQI以及空气质量等级划分的程序,程序和示例文件以及数据都在github上。

    bugsuse
  • Coincheck被盗5亿个XEM

    happy123.me
  • Python如何对折线进行平滑曲线处理?

    在用python绘图的时候,经常由于数据的原因导致画出来的图折线分界过于明显,因此需要对原数据绘制的折线进行平滑处理,本文介绍利用插值法进行平滑曲线处理:

    py3study
  • Python 的 .py 与 Cython 的 .pxd .pyx .pyd 文件格式之间的主要区别

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    于小勇
  • SAP BOM批量修改方法

    BOM批量更改操作步骤分为:选择参考对象-定义选择标准-选择更改类型-定义更改数据-执行更改,查看日志。

    用户5495712
  • 【小家java】java8中接口方法引发的思考(默认方法、static静态方法)

    java8可以说是jdk版本的一次重大升级,给我们也带来了非常多的新特性,而本文就针对于java8中很重要的新特性之一:接口方法。来讨论一下平时使用中可能遇到的...

    YourBatman
  • python项目练习二:画幅好画

    这个例子着实很简单,不过我发现在python里面可以直接在数组,里面写for循环,真是越用越方便。

    the5fire

扫码关注云+社区

领取腾讯云代金券