zoukankan      html  css  js  c++  java
  • 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求

     

     
    1
    2
    3
    4
    <div  >
                            <input type="file" name="FileUpload" id="FileUpload">
                            <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a>
                        </div>

      

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <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 写法

  • 相关阅读:
    webpack 构建同时适用于手机和电脑的调试服务器
    自定义事件 js
    浏览器下载本地数据
    .net 获取当前周及根据年和周获取起始结束时间
    实现SQL Server中的切割字符串SplitString函数,返回Table
    WebApi 服务监控
    log4net 记录MVC监控日志
    一致性Hash算法在Redis分布式中的使用
    Redis主从复制配置
    windows平台下redis安装及配置文件介绍
  • 原文地址:https://www.cnblogs.com/chenduzizhong/p/8878184.html
Copyright © 2011-2022 走看看