zoukankan      html  css  js  c++  java
  • 传统表单提交文件上传,以及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 & 是不行的。

  • 相关阅读:
    68
    56
    Django manager 命令笔记
    Django 执行 manage 命令方式
    Django 连接 Mysql (8.0.16) 失败
    Python django 安装 mysqlclient 失败
    H.264 SODB RBSP EBSP的区别
    FFmpeg—— Bitstream Filters 作用
    MySQL 远程连接问题 (Windows Server)
    MySQL 笔记
  • 原文地址:https://www.cnblogs.com/mzywucai/p/11053330.html
Copyright © 2011-2022 走看看