文件上传预览下载

news2024/10/5 13:32:37

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

1.表单组件标签只能用:<input 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发送示例
如果需要上传多个文件
示例
<!DOCTYPE html>
<html>
<head>
    <title>多文件上传示例</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
    function uploadFiles() {
        var fileInput = document.getElementById("fileInput");
        var files = fileInput.files;

        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        
        for (var i = 0; i < files.length; i++) {
            formData.append("files", files[i]);
        }

        xhr.open("POST", "UploadServletServlet", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("response").innerHTML = xhr.responseText;
            }
        };

        xhr.send(formData);
    }
</script>
</body>
</html>

用JQuery封装的ajax发送示例   后端代码相同
多个文件示例
<!DOCTYPE html>
<html>
<head>
    <title>多文件上传示例</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
    function uploadFiles() {
        var fileInput = document.getElementById("fileInput");
        var files = fileInput.files;

        var xhr = new XMLHttpRequest();
        var formData = new FormData();

        for (var i = 0; i < files.length; i++) {
            formData.append("files", files[i]);
        }

        xhr.open("POST", "UploadServletServlet", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("response").innerHTML = xhr.responseText;
            }
        };

        xhr.send(formData);
    }
</script>
</body>
</html>

演示用fetch发送请求

多个文件示例

<!DOCTYPE html>
<html>
<head>
    <title>多文件上传示例</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
    function uploadFiles() {
        var fileInput = document.getElementById("fileInput");
        var files = fileInput.files;

        var formData = new FormData();
        
        for (var i = 0; i < files.length; i++) {
            formData.append("files[]", files[i]);
        }

        fetch("UploadServletServlet", {
            method: "POST",
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            document.getElementById("response").innerHTML = data;
        })
        .catch(error => {
            console.error("文件上传失败: " + error);
        });
    }
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1142742.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

selenium工作原理和反爬分析

一、 Selenium Selenium是最广泛使用的开源Web UI(用户界面)自动化测试套件之一&#xff0c;支持并行测试执行。Selenium通过使用特定于每种语言的驱动程序支持各种编程语言。Selenium支持的语言包括C#&#xff0c;Java&#xff0c;Perl&#xff0c;PHP&#xff0c;Python和Ru…

编程实例:多人同时计时计费管理系统软件,可适用于钓场计时等管理

编程实例&#xff1a;多人同时计时计费管理系统软件&#xff0c;可适用于钓场计时等管理 编程系统化课程总目录及明细&#xff0c;点击进入了解详情。https://blog.csdn.net/qq_29129627/article/details/134073098?spm1001.2014.3001.5502 1、使用该编程工具开发的多人计时计…

Kafka - 3.x 副本不完全指北

文章目录 kafka 副本的基本信息Leader选举过程Kafka Controllerkafka 分区副本Leader的选举流程实际演示① 查看first的详细信息&#xff0c;注意观察副本分布情况② 停掉hadoop103上的kafka进程③ 再次查看first的相信信息&#xff0c;观察副本分布④ 处理分区leader分布不均匀…

吴恩达《机器学习》1-4:无监督学习

一、无监督学习 无监督学习就像你拿到一堆未分类的东西&#xff0c;没有标签告诉你它们是什么&#xff0c;然后你的任务是自己找出它们之间的关系或者分成不同的组&#xff0c;而不依赖于任何人给你关于这些东西的指导。 以聚类为例&#xff0c;无监督学习算法可以将数据点分成…

第八节——Vue渲染列表+key作用

一、列表渲染 vue中使用v-for指令进行列表 <template><div><!-- item 代表 当前循环的每一项 --><!-- index 代表 当前循环的下标--><!-- 注意&#xff1a;必须要加key--><div v-for"(item, index) in arr" :key"index"…

vue源码分析(三)——new Vue 的过程(详解data定义值后如何获取的过程)

文章目录 零、准备工作1.创建vue2项目2.修改main.js 一、import Vue from vue引入的vue是哪里来的&#xff08;看导入node_modules包&#xff09;1&#xff1a; 通过node_modules包的package.json文件2&#xff1a; 通过配置中的main入口文件进入开发环境的源码&#xff08;1&a…

MySQL数据库——视图的更新、视图作用以及案例

目录 视图的更新 介绍 示例 视图作用 案例 视图的更新 介绍 要使视图可更新&#xff0c;视图中的行与基础表中的行之间必须存在一对一的关系。 如果视图包含以下任何一项&#xff0c;则该视图不可更新&#xff1a; 聚合函数或窗口函数&#xff08;SUM()、MIN()、MAX()…

体外循环手术中循环管路灌注流量精密自动控制解决方案

摘要&#xff1a;在目前的体外循环手术过程中&#xff0c;需要灌注师快速而精确地操作使得血液流速调节到期望的目标值。基于国外文献报道的血流量自动控制方法和装置&#xff0c;本文提出了技术改进且国产化解决方案。通过本解决方案中增加的国产系列电控夹管阀、电控针阀和具…

C++之特殊类的设计

目录 一、单例模式 1、设计模式 2、单例模式 1、饿汉模式 2、懒汉模式 3、单例对象的释放问题 二、设计一个不能被拷贝的类 三、设计一个只能在堆上创建对象的类 四、设计一个只能在栈上创建对象的类 五、设计一个不能被继承的类 一、单例模式 1、设计模式 概念&am…

RabbitMQ如何保证消息不丢失呢?

RabbitMQ 是一个流行的消息队列系统&#xff0c;用于在分布式应用程序之间传递消息。要确保消息不会丢失&#xff0c;可以采取以下一些措施&#xff1a; 持久化消息&#xff1a; RabbitMQ 允许你将消息标记为持久化的。这意味着消息将被写入磁盘&#xff0c;即使 RabbitMQ 服务…

王道p149 7.二叉树按二叉链表形式存储,写一个判别给定二叉树是否是完全二叉树的算法(c语言代码实现)

采用层次遍历算法&#xff0c;将所有结点加入队列(包括空结点)。 如果没有左孩子&#xff0c;就看有没有右孩子&#xff0c;如果有右孩子&#xff0c;那么不为完全二叉树。 如果有左孩子&#xff0c;且之前不存在缺孩子的结点&#xff0c;左孩子进队&#xff0c;如果有右孩子…

专家级数据恢复:UFS Explorer Professional Recovery Crack

UFS Explorer Professional Recovery - 一款功能强大且方便的数据恢复程序&#xff0c;支持检测大量文件系统、操作系统和各种类型的驱动器&#xff1a;从简单的闪存驱动器到复杂的复合存储&#xff08;各种级别的 RAID 阵列&#xff09;。 该程序由执业专家开发&#xff0c;并…

Leetcode刷题详解——点名

1. 题目链接&#xff1a;LCR 173. 点名 2. 题目描述&#xff1a; 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 示例 1: 输入: records [0,1,2,3,5] 输出: 4示例 2: 输入: records [0, 1, 2, 3, 4,…

蓝桥杯第 2 场算法双周赛 第2题 铺地板【算法赛】c++ 数学思维

题目 铺地板https://www.lanqiao.cn/problems/5887/learning/?contest_id145 问题描述 小蓝家要装修了&#xff0c;小蓝爸爸买来了很多块&#xff08;你可以理解为数量无限&#xff09;2323 规格的地砖&#xff0c;小蓝家的地板是 nm 规格的&#xff0c;小蓝想问你&#xf…

[C++随想录] map和set的使用

map和set的使用 set初始化finderasecountlower_bound && upper_boundequal_ range mapinsert[ ]运算符 multiset && multimap set — — key模拟 map — — key_value模型 set 初始化 void set_test1() {set<int>s;s.insert(10);s.insert(12);s.insert(…

2023年MathorCup高校数学建模挑战赛大数据挑战赛赛题浅析

比赛时长为期7天的妈杯大数据挑战赛如期开赛&#xff0c;为了帮助大家更好的选题&#xff0c;首先给大家带来赛题浅析&#xff0c;为了方便大家更好的选题。 赛道 A&#xff1a;基于计算机视觉的坑洼道路检测和识别 A题&#xff0c;图像处理类题目。这种题目的难度数模独一档…

如何查看多开的逍遥模拟器的adb连接端口号

逍遥模拟器默认端口号为&#xff1a;21503。 不过&#xff0c;使用多开器多开的时候&#xff0c;端口就不一定是21503了。 如何查看&#xff1f; 进入G:\xiaoyao\Microvirt\MEmu\MemuHyperv VMs路径中 每多开一个模拟器&#xff0c;就会多出一个文件夹。 进入你要查找端口号…

C#,数值计算——分类与推理,基座向量机高斯核(Svmgausskernel)的计算方法与源程序

No logical, not an AI. 你现在能阅读到的大量AI都是假AI&#xff0c;包括 。。。GPT 在内&#xff0c;没有任何鸟用。凡为 ...GPT 发声者均为假学者。 No log, no AI. 1 文本格式 using System; namespace Legalsoft.Truffer { public class Svmgausskernel : Svmgen…

Flask Run运行机制剖析

一、前言 已经玩了一段时间Flask &#xff0c;每次调用app.run(或flask run)就可以启动应用&#xff0c;今天我们就来了解一下run背后究竟做了些什么事情。 注&#xff1a;通过上面几行代码就可以启动一个Flask服务器&#xff0c;打开浏览器输入http://127.0.0.1:5000, 页面上…

sharepoint2016-2019升级到sharepoint订阅版

一、升级前准备&#xff1a; 要建立新的sharepoint订阅版环境&#xff0c;需求如下&#xff1a; 1.单服务器硬件需求CPU 4核&#xff0c;内存24G以上&#xff0c;硬盘300G&#xff08;根据要迁移的数量来扩容大小等&#xff09;&#xff1b; 2.操作系统需要windows server 20…