zoukankan      html  css  js  c++  java
  • 通过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 写法

  • 相关阅读:
    分苹果
    马拉车算法(求最长回文子串)
    KMP
    字典树
    关于子类和父类中的this的用法
    最长上生子序列LIS
    sass
    黑马程序员----java基础笔记下(毕向东)
    DOM
    ajax教程
  • 原文地址:https://www.cnblogs.com/LoveTX/p/7081515.html
Copyright © 2011-2022 走看看