• 文件上传预览下载

    文件上传的表单必须满足三个条件:

    1.表单组件标签只能用:type="file" value="xxx">会自动弹框让用户选择文件

    2.请求方式只能用post

    3.表单编码格式只能用:mutipart/form-data

            根据HTTP协议规定,浏览器每次向后台提交参数,都会对参数进行统一编码

            以前没有设置过,默认采用编码格式是application/x-www-form-urlencoded,此种编码格式只能

            对文本数据进行编码,文件上传的表单格式必须是mutipart/form-data

            

            文件上传的表单格式必须是mutipart/form-data

    先搭个架子

    选择文件,点击保存

    下面是文件上传的请求结构

    mutipart/form-data:表示提交的数据,以多段(每一个表单项一个数据)的形式进行拼接,然后以二进制流的形式发送给服务器

    说明一点,HTTP请求中,Get请求通常不包含请求体,因此请求头中也没有Content-Type

    Content-type用来表示请求体或者响应体(body)中的媒体类型

    后端以流的形式接收,看下传过来的body体中的数据

    如何让浏览器浏览图片呢？

    其实预览图片,也是将图片以二进制流的形式返回的

    自己查找资料,在Servlet中,比如说将D:/upload映射到浏览器请求中的某个路径的方法,没有搞明白具体的就不写了

    如果用servlet提供预览下面方法笨了点,但是可行,注意因为浏览器发送中文会变成%xx%所以这里将图片改成了数字命名,如果是实际开发中用到,记得中文转换问题

    Content-Disposition的值有两种常用

     inline表示让浏览器窗口打开 一般用于用于浏览图片和或PDF文件

    attachment 用于文件下载

    这里因为访问是直接/xxxx文件名跟过来的  所以用/file/*

    Content-Type 可以不设置

    预览的话  可以不设置

    response.setHeader("Content-Disposition", "attachment或者inline; filename=\"" + fileName + "\"");

    访问地址:访问地址:

    当然也可以用?file=xxx的方式  localhost:8080/fileUpload/file?file=123.jpg

    ​

    ​

    文件下载

    改成attachment就好了    注意下 filename=xxx这个是下载后的文件名,可以和原文件设置成不一样

    ​

    ​

    上面方式没有使用第三方jar包,只有上传时候用了@MultipartConfig Servlet-api里的注解,如果上传时连@MultipartConfig也不想用,我就不知道了

    关于@MultipartConfig的一些属性

    @MultipartConfig(

    fileSizeThreshold = 1024 * 1024, // 1 MB    

    maxFileSize = 1024 * 1024 * 10, // 10 MB

    maxRequestSize = 1024 * 1024 * 50 // 50 MB

    )

    form表单可以这样上传多个文件

    ​

    也可以这样            加个multiple

    ​

    ​

    这样在弹出窗口的时候,可以按住Ctrl点击多个文件上传

    多文件下载 一般是后端将多个文件压缩成（zip） 然后提供一个链接

    response.setHeader("Content-Disposition", "attachment; filename=\"multiple_files.zip\"");不需要和原来文件一样,这个是设置下载后的名字

    @MultipartConfig 注解告诉Servlet容器，该Servlet将处理多部分请求，其中包括文件上传。

    所谓的多部份请求就是

    ​

     

    一般文件上传会用到第三方jar   下面演示第三方jar包的方式
     

    comons-fileupload和commons-io
     

    关于这两jar包中常用的方法
     

     
 ​ 
 ​ 

     

    
  文件上传 

     

     

    
  单个多个都可以 

     

     
  

     

     

     
  

     

     

     

    
  文件预览 

     

     

     

     
 
    预览的话  可以不设置
     
 
    response.setHeader("Content-Disposition", "attachment或者inline; filename=\"" + fileName + "\"");
     
 
     
 
     
 
     
 
    下载
     
 
    注意filename=xxx  是下载后的名字
     
 
     
 
     
 
     
 
     
  response.setHeader( 
  "Content-Disposition" 
  , 
  "attachment;fileName=1.jpg" 
  );  
 
     
 
     
  这个响应头告诉浏览器。这是需要下载的。而 
  attachment 
  表示附件，也就是下载的一个文件。 
  fileName= 
  后面， 
 
     
 
     
  表示下载的文件名。 
 
     
 
     
 
     
 
     
  当filenae=xxx    想写中文的时候URLEncoder解决 
 
     
 
     
  如果直接写中文 
 
     
 
     
   
 
     
 
     
 
    
   使用URLEncoder之后          这样浏览器就可以解析 
 
     
 
     
   
 
     
 
     
   
 
     
 
     
 
     
   
 
     
 
     
 
     
 
     
 
     
 
    
   用ajax发送示例 
 
     
 
     
   
 
     
 
     
   
 
     
 
     
 
     
 
    
   如果需要上传多个文件 
 
     
 
    
   示例 
 
     
 
     
  
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>多文件上传示例</title>
    5.     <meta charset="UTF-8">
    6. </head>
    7. <body>
    8. <h1>多文件上传示例</h1>
    9. <input type="file" id="fileInput" multiple>
    10. <button onclick="uploadFiles()">上传文件</button>
    11. <div id="response"></div>
    12. <script>
    13.     function uploadFiles() {
    14.         var fileInput = document.getElementById("fileInput");
    15.         var files = fileInput.files;
    16.  
    17.         var xhr = new XMLHttpRequest();
    18.         var formData = new FormData();
    19.         
    20.         for (var i = 0; i < files.length; i++) {
    21.             formData.append("files", files[i]);
    22.         }
    23.  
    24.         xhr.open("POST", "UploadServletServlet", true);
    25.         xhr.onreadystatechange = function () {
    26.             if (xhr.readyState === 4 && xhr.status === 200) {
    27.                 document.getElementById("response").innerHTML = xhr.responseText;
    28.             }
    29.         };
    30.  
    31.         xhr.send(formData);
    32.     }
    33. </script>
    34. </body>
    35. </html>
     
  
     
 
     
 
     
 
     
 
    
   用JQuery封装的ajax发送示例   后端代码相同 
 
     
 
     
   
 
     
 
     
 
    
   多个文件示例 
 
     
 
     
 
     
  
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>多文件上传示例</title>
    5.     <meta charset="UTF-8">
    6. </head>
    7. <body>
    8. <h1>多文件上传示例</h1>
    9. <input type="file" id="fileInput" multiple>
    10. <button onclick="uploadFiles()">上传文件</button>
    11. <div id="response"></div>
    12. <script>
    13.     function uploadFiles() {
    14.         var fileInput = document.getElementById("fileInput");
    15.         var files = fileInput.files;
    16.  
    17.         var xhr = new XMLHttpRequest();
    18.         var formData = new FormData();
    19.  
    20.         for (var i = 0; i < files.length; i++) {
    21.             formData.append("files", files[i]);
    22.         }
    23.  
    24.         xhr.open("POST", "UploadServletServlet", true);
    25.         xhr.onreadystatechange = function () {
    26.             if (xhr.readyState === 4 && xhr.status === 200) {
    27.                 document.getElementById("response").innerHTML = xhr.responseText;
    28.             }
    29.         };
    30.  
    31.         xhr.send(formData);
    32.     }
    33. </script>
    34. </body>
    35. </html>
     
  
     
  
     
  
     
  
    演示用fetch发送请求
     
  
     
  
     
  
    多个文件示例
     
  
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>多文件上传示例</title>
    5.     <meta charset="UTF-8">
    6. </head>
    7. <body>
    8. <h1>多文件上传示例</h1>
    9. <input type="file" id="fileInput" multiple>
    10. <button onclick="uploadFiles()">上传文件</button>
    11. <div id="response"></div>
    12. <script>
    13.     function uploadFiles() {
    14.         var fileInput = document.getElementById("fileInput");
    15.         var files = fileInput.files;
    16.  
    17.         var formData = new FormData();
    18.         
    19.         for (var i = 0; i < files.length; i++) {
    20.             formData.append("files[]", files[i]);
    21.         }
    22.  
    23.         fetch("UploadServletServlet", {
    24.             method: "POST",
    25.             body: formData
    26.         })
    27.         .then(response => response.text())
    28.         .then(data => {
    29.             document.getElementById("response").innerHTML = data;
    30.         })
    31.         .catch(error => {
    32.             console.error("文件上传失败: " + error);
    33.         });
    34.     }
    35. </script>
    36. </body>
    37. </html>
     
  
     
 
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
通俗解释EMA                            
    
用VLOOKUP快速合并两个表格                            
    
Baklib知识分享|文档生命周期：确保您的文档产出效率                            
    
VMware Workstation 17 新特性介绍                            
    
C++设计模式-创建型设计模式：原型模式                            
    
《算法系列》之设计                            
    
从零开始学React--JSX                            
    
人工智能的未来发展前景：机遇与挑战                            
    
第八章 小程序后端开发                            
    
【C】字符串函数与字符函数                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/tiantiantbtb/article/details/134066250
                
    •