上传文件的方法

一、原生js

HTML部分

       

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部分

       

             
       

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部分

       

             
             
       

四、jquery.form.js

HTML部分

        

               姓名:

               年龄:

               
       

JS部分

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

五、layer上传方法

HTML部分
         
                 上传图片
         

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){
                            //请求异常回调
                         }
                 });
         });