上传文件的方法

一、原生js

HTML部分

        <input type="file" id="upload-file" name="myfile" />

JS部分

        var xhr;
        var fileObj = document.getElementById("upload-file").files[0];
        var url = "地址";
        var form = new FormData();
        form.append("file",fileObj);
        form.append("groupId",$(groupId).val()); //添加其他参数
        form.append("seriesId",$(seriesId).val());
        xhr = new XMLHttpRequest();
        xhr.open('post',url,true);
        xhr.onload = "请求完成的方法";
        xhr.onerror = "请求失败的方法";
        xhr.send(form);

二、jquery方法

HTML部分

        <form action="" id="upload" enctype="multipart/form-data" method="post">
              <input type="file" name="file" id="upload-file"/>
        </form>

JS部分

        var form = document.getElementById("upload");
        var formData = new FormData(form);
        $.ajax({
            type:"post",
            url:"地址",
            data:formData,
            processData:false,
            contentType:false,
            success:function(res){
                ......
            }
        });

三、form方式

HTML部分

       <form action="地址" id="form" enctype="multipart/form-data" autocomplete="off" method="POST">
             <input class="input-text" id="upload-file" type="file"/>
             <input class="btn01" type="submit" value="提交"/>
       </form>

四、jquery.form.js

HTML部分

        <form id="form1" action="" enctype="multipart/form-data">
               姓名:<input name="name" id="name" class="specialFields"><br>
               年龄:<input name="age" id="age" type="number" class="specialFields"><br>
               <input type="button" value="提交" id="sub1">
        </form>

JS部分

         var obj = {
            "usercode":usercode,
            'alias':alias,
         }
         var options = {
            url :"地址",
            data:obj,
            type : "post",
            success : function(data) {
                
            }                    
        };
        $("#form1").ajaxSubmit(options);

五、layer上传方法

HTML部分
         <button type="button" class="layui-btn" id="test2">
                 <i class="layui-icon">&#xe67c;</i>上传图片
         </button>

JS部分

         layui.use('upload', function(){
                var upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                      elem: '#test2', //绑定元素
                      url: '地址', //上传接口
                      accept: 'images',//指定允许上传时校验的文件类型 可选值有：images、file、video、audio
                      field:"image", //设定文件域的字段名
                      data:{  //请求上传接口的额外参数
                             "name":function(){    return $('#Name').val()   }
                      },
                      auto:false, //是否选完文件后自动上传。设定 false，需要设置 bindAction 参数来指向一个其它按钮提交上传
                      bindAction:".btn01", //指向一个按钮触发上传，一般配合 auto: false 来使用
                      before:function(){ //文件提交上传前的回调
                             if(!$('#Name').val()){   return false;  }
                       },
                       done: function(res){ //执行上传请求后的回调
                             //上传完毕回调
                            uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        },
                        error: function(error){
                            //请求异常回调
                         }
                 });
         });

来源：CSDN

作者：meetAlice

链接：https://blog.csdn.net/qq_42129143/article/details/103855559