位置: IT常识 - 正文

用JavaScript实现文件的上传与下载(javascript编写程序)

编辑:rootadmin
用JavaScript实现文件的上传与下载

推荐整理分享用JavaScript实现文件的上传与下载(javascript编写程序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript编写程序,用javascript编写程序,并嵌入html网页,怎么用javascript,javascript怎么写,javascript怎么写,javascript编写,javascript怎么写,javascript编写,内容如对您有帮助,希望把文章链接给更多的朋友!

一、文件上传

1、普通文件上传

JavaScript 可以使用表单提交来实现文件上传。首先,在 HTML 中创建一个文件输入框:

<input type="file" id="fileInput">

 然后,在 JavaScript 中获取文件输入框的引用,并在其上设置事件监听器,如下所示:

var fileInput = document.getElementById('fileInput');fileInput.addEventListener('change', function () { // 在这里处理选择的文件});

在事件监听器中,可以使用 fileInput.files[0] 属性获取选择的文件,然后对文件进行处理。

接下来可以使用 XMLHttpRequest 或 fetch API 来上传文件。

使用 XMLHttpRequest:

var file = fileInput.files[0];var formData = new FormData();formData.append('file', file);var xhr = new XMLHttpRequest();xhr.open('POST', 'url', true);xhr.onload = function () { if (xhr.status === 200) { console.log('upload success'); }};xhr.send(formData);

 使用 fetch:

var file = fileInput.files[0];var formData = new FormData();formData.append('file', file);fetch('url', { method: 'POST', body: formData}).then(response => { if (response.ok) { console.log('upload success'); }});

另外还可以使用第三方库如 axios 来实现文件上传,具体实现方法可以参考相关文档。

2、大文件上传

2.1、前端实现代码

在上传大文件时,通常采用分块上传的方式。将大文件分成若干个块,每块一个 HTTP 请求上传。

实现大文件上传的步骤如下:

用户选择文件。将文件分成若干块。对于每一块,向服务器发送 HTTP 请求上传。服务器接收到文件块后,将其存储在服务器上。在所有块上传完成后,服务器将所有块合并成一个完整的文件。

JavaScript 可以使用 File API(File 和 Blob 对象)来实现文件的读取和上传。

用JavaScript实现文件的上传与下载(javascript编写程序)

下面是一个使用 JavaScript 实现大文件上传的简单实例,使用分块上传的方法。

<input type="file" id="file-input">// 上传文件块function uploadChunk(file, start, end, chunk) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.setRequestHeader('Content-Type', 'application/octet-stream'); xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + end + '/' + file.size); xhr.send(chunk);}// 上传文件function uploadFile(file) { var chunkSize = 1 * 1024 * 1024; // 分块大小为1MB var chunks = Math.ceil(file.size / chunkSize); // 计算分块数 var currentChunk = 0; // 当前分块 var start, end; while (currentChunk < chunks) { start = currentChunk * chunkSize; end = start + chunkSize >= file.size ? file.size : start + chunkSize; var chunk = file.slice(start, end); uploadChunk(file, start, end, chunk); currentChunk++; }}// 监听文件选择事件document.getElementById('file-input').addEventListener('change', function(e) { var file = e.target.files[0]; if (file) { uploadFile(file); }});

在这个实例中,我们使用了 XMLHttpRequest 对象上传文件,并设置了 Content-Type 和 Content-Range 消息头。Content-Type 消息头表示上传的数据类型是二进制数据,Content-Range 消息头表示上传的文件块的范围。

在这个示例中,我们将文件分成若干块,每块大小为 1MB。我们使用 File API 中的 slice 方法截取文件块,并使用 XMLHttpRequest 将文件块上传到服务器。

注意,这只是一个简单的实例,代码仅供参考,在实际应用中还需要考在考虑以下几点:

如果服务器端支持断点续传,可以在服务器端记录已经上传的文件块,避免重复上传。需要考虑如何处理上传失败的文件块,是否需要重试。在上传过程中需要提供进度条,让用户了解上传进度。在上传完成后需要有反馈,告知用户上传是否成功。服务器端如何处理上传的文件块,将其合并成一个完整的文件。服务器端存储空间的问题。可以使用分布式文件系统(如 HDFS)或云存储(如 Amazon S3)来存储上传的文件。文件块上传顺序、文件块校验、断点续传等问题。

通过分块上传的方式,我们可以将大文件分成若干块上传,避免一次性上传大文件造成的超时或者内存不足的问题,同时也方便实现断点续传和上传进度的显示。

除了上面提到的方法外,还可以使用第三方库来实现大文件上传。常见的第三方库有:

resumable.jspluploadfine-uploadertus-js-client

这些库都提供了文件分块、断点续传、上传进度等功能,可以让你更快捷地实现大文件上传。

不过要注意的是,使用第三方库可能会增加代码的复杂性和对第三方库的依赖。在选择使用第三方库时需要权衡其优缺点,并确保它满足你的需求。

2.2、后端实现代码

Java 后端代码示例:

import java.io.IOException;import java.util.Map;import java.util.concurrent.ConcurrentHashMap;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItemIterator;import org.apache.commons.fileupload.FileItemStream;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.apache.commons.io.IOUtils;public class FileUploadServlet extends HttpServlet { private static final long serialVersionUID = 1L; // 保存所有分块数据,使用ConcurrentHashMap保证线程安全 private Map<String, byte[]> chunks = new ConcurrentHashMap<>(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { if (!ServletFileUpload.isMultipartContent(request)) { response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Not a multipart request"); return; } ServletFileUpload upload = new ServletFileUpload(); try { FileItemIterator iter = upload.getItemIterator(request); while (iter.hasNext()) { FileItemStream item = iter.next(); if (!item.isFormField()) { // 处理文件分块 processFilePart(item); } } } catch (Exception e) { e.printStackTrace(); } } private void processFilePart(FileItemStream item) throws Exception { String index = item.getFieldName(); byte[] data = IOUtils.toByteArray(item.openStream()); chunks.put(index, data); // 如果所有分块都已经上传完成,合并所有分块并保存文件 if (isAllChunksUploaded()) { // 合并所有分块并保存文件 mergeAndSaveFile("/path/filename.suffix"); } } private boolean isAllChunksUploaded() { // 判断是否所有分块都已经上传完成 int totalChunks = getTotalChunks(); for (int i = 0; i < totalChunks; i++) { if (!chunks.containsKey(String.valueOf(i))) { return false; } } return true; } public void mergeAndSaveFile(String fileName) throws Exception { int totalChunks = getTotalChunks(); int totalFileSize = getTotalFileSize(); byte[] mergedFile = new byte[totalFileSize]; int index = 0; for (int i = 0; i < totalChunks; i++) { byte[] chunkData = chunks.get(String.valueOf(i)); System.arraycopy(chunkData, 0, mergedFile, index, chunkData.length); index += chunkData.length; } saveFileToLocal(mergedFile, fileName); } private void saveFileToLocal(byte[] fileData, String filePath) throws Exception { try (FileOutputStream fos = new FileOutputStream(filePath)) { fos.write(fileData); } } private int getTotalChunks() { // You need to implement this method return 0; } private int getTotalFileSize() { // You need to implement this method return 0; }}

这只是一个示例代码,不是完整的项目。该代码使用了 Apache Commons FileUpload 库,在运行该代码之前请确保已经引入了该库。该代码实现了分块上传的主要逻辑,包括存储分块数据,合并所有分块并保存文件,以及判断是否所有分块都已经上传。

请注意,上面的代码中的 getTotalChunks 和 getTotalFileSize 方法需要您自行实现。它们将分别用于获取总分块数和总文件大小,这些信息可以通过前端预先发送给后端或从数据库中查询获得。

关于文件上传需要了解的知识点:

HTML5 文件上传文件上传技术文件上传安全性分块上传断点续传云存储

二、文件下载

在 JavaScript 中实现文件下载,常见的方法如下:

1、使用 window.location 实现:通过更改当前页面的 URL 为文件下载地址,从而实现下载。

window.location = 'file-download-url';

 2、使用 a 标签实现:通过创建一个 a 标签并设置其 href 和 download 属性,从而实现下载。

var link = document.createElement("a");link.download = "filename";link.href = "file-download-url";link.click();

 3、使用 fetch API 实现:通过使用 fetch API 获取文件内容,并将其写入 Blob 对象,最后利用 URL.createObjectURL 将其下载。

fetch('file-download-url') .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'filename'; link.click(); URL.revokeObjectURL(url); document.body.removeChild(link); });
本文链接地址:https://www.jiuchutong.com/zhishi/295854.html 转载请保留说明!

上一篇:尚硅谷vue笔记 详细讲解版(尚硅谷 天禹老师)(尚硅谷docker笔记)

下一篇:ChatGLM-6B (介绍以及本地部署)

  • 华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

    华为nova9pro是双卡双待吗(华为nova9pro是双卡双待设置)

  • 微机的关机顺序是什么(微机关机顺序是什么)

    微机的关机顺序是什么(微机关机顺序是什么)

  • ipad充电慢怎么办(ipad充电慢怎么解决10w)

    ipad充电慢怎么办(ipad充电慢怎么解决10w)

  • 为什么qq号会被盗号(为什么qq号会被冻结怎么解冻?)

    为什么qq号会被盗号(为什么qq号会被冻结怎么解冻?)

  • 苹果热点为什么连不上(苹果热点为什么打不开)

    苹果热点为什么连不上(苹果热点为什么打不开)

  • 拼多多虚假发货警告一次对商品有什么影响(拼多多虚假发货是什么意思举例说明)

    拼多多虚假发货警告一次对商品有什么影响(拼多多虚假发货是什么意思举例说明)

  • 拼多多企业店铺交税吗(拼多多企业店铺有什么好处)

    拼多多企业店铺交税吗(拼多多企业店铺有什么好处)

  • word2010文档扩展名的默认类型是什么(office2010中的word文件扩展)

    word2010文档扩展名的默认类型是什么(office2010中的word文件扩展)

  • 淘宝一个皇冠要多少单(淘宝一个皇冠要多少钱)

    淘宝一个皇冠要多少单(淘宝一个皇冠要多少钱)

  • 开机显卡转一下就停(开机显卡转一下不转了黑屏)

    开机显卡转一下就停(开机显卡转一下不转了黑屏)

  • 安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

    安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

  • 路由器设置完了为什么不能上网(路由器设置完了无法连接网络)

    路由器设置完了为什么不能上网(路由器设置完了无法连接网络)

  • 联想驱动管理有什么用(联想驱动管理有广告)

    联想驱动管理有什么用(联想驱动管理有广告)

  • vivos5怎么更换主题(vivo怎么更换主屏)

    vivos5怎么更换主题(vivo怎么更换主屏)

  • oppo 怎么添加图片插件(oppo怎么添加图标包)

    oppo 怎么添加图片插件(oppo怎么添加图标包)

  • iphone单手模式怎么开(iPhone单手模式怎么触发)

    iphone单手模式怎么开(iPhone单手模式怎么触发)

  • qq注销了还能登录吗(qq注销了还能登录英雄联盟吗)

    qq注销了还能登录吗(qq注销了还能登录英雄联盟吗)

  • usb-c是什么意思(usbc转usbc是什么意思)

    usb-c是什么意思(usbc转usbc是什么意思)

  • 手机屏幕上的字怎么弄(手机屏幕上的字怎么放大)

    手机屏幕上的字怎么弄(手机屏幕上的字怎么放大)

  • 华为matex国内上市时间

    华为matex国内上市时间

  • 新版快手有访客记录吗(新版快手有访客吗)

    新版快手有访客记录吗(新版快手有访客吗)

  • 苹果呼叫限制怎么解除(苹果呼叫限制怎么取消设置)

    苹果呼叫限制怎么解除(苹果呼叫限制怎么取消设置)

  • 开启AHCI模式后,为什么出现电脑开机蓝屏?(设置ahci模式后,开不了机)

    开启AHCI模式后,为什么出现电脑开机蓝屏?(设置ahci模式后,开不了机)

  • 【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互(微信小程序从零)

    【小程序从0到1】宿主环境|WXML|WXSS|JS逻辑交互(微信小程序从零)

  • 公司有买社保就要交税吗
  • 建筑业增值税税额怎么算
  • 消防管理费用收取标准
  • 有社保的工资计提和发放
  • 到期一次还本付息的债券投资摊余成本
  • 政府返还的增值税怎么算
  • 增值税主表填报说明
  • 现金流管理模式
  • 调表不调账最后会有什么问题
  • 收到转账支票存支票背书处怎么填写
  • 保安服务专票是多少税点
  • 公司团建活动奖状模板
  • 小规模企业申请破产流程
  • 企业收到经营外的发票如何做账
  • 慈善会可以开什么票据
  • 公司房产税如何计算器
  • 个人开具工程款发票
  • 发票销货清单需要到税务局吗
  • 企业筹建期间可以自己发农民工工资么
  • 非正常损失进项税额转出计算
  • 个人取得经济补偿金个人所得税计算
  • 工会经费的开支必须取得发票么
  • 合并报表同一控制下和非同一控制下区别
  • 公司的职工教育是指什么
  • php中字符串函数
  • macbook air怎么点击
  • 创建自定义对象主要哪几种方法,并写出基本语法结构?
  • 待摊费用和预提费用改为什么科目了
  • 生产费用在完工产品和在产品之间
  • 税法工资薪金总额
  • 销售不动产税目计缴增值税有哪些
  • php炫酷代码
  • 搜索人工制造
  • js中的截取字符串
  • 纳税人提供技术开发服务
  • 预缴的附加税需要转出吗
  • 终止经营净利润含义
  • 上季度的发票开出去了可以作废吗
  • 供货方代垫运费会计分录
  • 应收账款提坏账准备的方法
  • mysql数据库高可用方案
  • 公司组织出国旅游可以不带钱吗
  • 未交增值税借方余额怎么调整
  • 培训费怎么收取
  • db2 -968
  • 计入固定资产和费用的区别
  • 增值税加计扣除最新政策2023
  • 金税四期对企业纳税管理影响分析
  • 费用报销票跨月可以用吗
  • 购进溢余分录
  • 应收管理费,做应收款处理会计分录
  • 社会团体费用支出有什么要求
  • 收到利息的会计凭证
  • 疫情防控重点保障企业名单
  • 费用误计入固定资产
  • 兼职会计做什么工作
  • 非营利医疗机构有哪些
  • 如何设置window图标大小
  • 苹果电脑怎么截屏按哪个键
  • win10系统安装.net framework 3.5
  • rtc resume
  • mcdlc.exe - mcdlc是什么进程文件 有何作用
  • dns win7
  • win7怎么设置鼠标双击打开
  • jquerycdn
  • jquery获取input内容
  • ubuntu20.04中文
  • 分享js粘帖屏幕怎么弄
  • python win
  • JavaScript中Object.prototype.toString方法的原理
  • Unity3D游戏开发毕业论文
  • python 字典的字典
  • 辽宁省电子税务局电话
  • 西安国家税务局丁雁现任命职务
  • 为什么医保卡显示无效
  • ca锁使用
  • 国家电子税务总局重庆电子税务局
  • 企业筹建期间发生的费用应计入什么账户
  • 扬州儿童社保卡
  • 生育保险证明去哪里办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设