• 传统表单提交文件上传,以及FormData异步ajax上传文件


    传统的文件上传:

    只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单。

    以下是另一种方式FormData,有时候我们需要ajax进行异步的文件提交,怎么办?
    以下是引用别人的话:
    FormData的使用

    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

    FormData它的本质还是和表单设置成multipart/form-data,通过submit提交一样,但是它的好处是伪表单,通过js可构造,可以异步的进行文件的上传。

     var formData = new FormData();
     // 因为jQuery的原因$("#xx")[0],如果时原生js,直接document.getElementById就行了
     formData.append(type, $("#"+id)[0].files[0]); //formData 添加文件
     formData.append("type", "image"); // formData添加普通字段
     $.ajax({
         type: "POST",
         url: 'http://localhost:8080/upload',
         // 以下是我对应的业务需求才加上的请求头
         beforeSend: function(request) {
    		request.setRequestHeader("Authorization", "token");
         },
         data: formData,
         processData: false,
         contentType: false,
         success: function (data) {
         	console.log(data)
             alert(data);
         }
     });
    

    以下是FormData整体代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="js/jQuery_3.3.1.js"></script>
        <title></title>
    </head>
    <body>
    <input id="upload" type="file" />
    <input type="button" value="上传" id="btn" />
    </body>
    <script type="text/javascript">
        // 提交方式:这里只说FormData的异步ajax文件上传方式
    	//(跳过multipart/form-data;boundary=xxx的传统表单提交)
    
        
    	var file_type = "image";
    	var token = "lsnu12345";
    	var type = "file";
    	var id = "upload"; 
    	$(document).ready(function () {
        	$("#btn").click(function(){
        		// 方式一:两个header,一个param
                //即input的id,用来寻找值
    		    var formData = new FormData();
    		    // 因为jQuery的原因$("#xx")[0],如果时原生js,直接document.getElementById就行了
               // 方式二:一个header,两个params
                
               var formData = new FormData();
               formData.append(type, $("#"+id)[0].files[0]); 
               formData.append("type", file_type);
               $.ajax({
                   type: "POST",          
                   url: 'http://localhost:8080/upload/two-params',
                   beforeSend: function(request) {						
                       request.setRequestHeader("Authorization", token);
                   },
                   data: formData,
                   processData: false,
                   contentType: false,
                   success: function (data) {
                       console.log(data);
                   }
               });
                
        	});
        });
    </script>
    </html>
    

    详细前后端ajax异步文件上传,参照:我的文件服务器[码云]基于SpringBoot

    备忘

    以下皆是我备忘的,和异步文件上传同时出现的问题,并无直接关系
    1.SpringBoot中mapping中匹配多个url,记得使用xxxMapping(value = {“x/xx”, “y/yy”,“z/zz”})
    2.SpringBoot中如果对类中成员变量的属性值进行properties注入,此注入一定是在SpringBoot上下文全部加载完,才能加载,在启动类(main中或者SpringInitListener中加载都是null的)
    3.特殊情况下,项目包需要高权限后台运行,可以通过nohup sudo java -jar xxx & 的形式;但是sudo nohup java -jar xxx & 是不行的。

  • 相关阅读:
    C语言与内存模型初探
    【编辑中】软件工程知识萃取
    【深入理解计算机系统01】不同层级程序指令间的转换
    【统计学中的普适智慧】假设检验
    windows 内部预览版与迅雷极速版不配合
    网络安全理论初涉
    Unix philosophy
    BOP 2016 复赛题目
    10.8做题——USACO1.2命名那个数字(Name That Number)
    10.6上课——problem1切割木板(USACO 2006 November Gold)
  • 原文地址:https://www.cnblogs.com/mzywucai/p/11053330.html
Copyright © 2020-2023  润新知