首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js不借助后端,多文件拖拽压缩上传,支持选择文件

在系统中上传文件时,需要支持多文件文件夹上传,并且需要在文件上传时需要将多文件压缩成zip包,下载的时候,直接下载zip包 听到这个需求,我的第一反应就是js应该没有强大吧,因为压缩和访问文件夹,涉及到了文件系统的读取和修改...主要用到的库是 jszip 则 则这里简单对jszip做下简单介绍,更详细的功能和api请移步官网. jszip是是一个创建,读取和写入.zip文件js库, api优化,简单 浏览器支持 实现思路如下...: 1:用户选中文件文件夹后,获取文件对象, 2:遍历获取的文件对象 放入实例化的zip对象中 3:使用generateAsync()方法生成文件, 通过formdata提交到服务端 代码如下: 此案例支持拖拽上传多个文件..., 支持选择多个文件,选择单个文件夹 此外可以使用 file-saver库的saveAs对zip文件包保存到本地 <img alt...能不能做,要想看这个库的api具不具备将文件转化为zip文件,通过以上两个api,可以得知这个库是支持的. jszip库api 另外jszip库也支持读取本地和远程的zip文件返回内部文件目录,文件名.

3.5K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WebPack插件实现:打包之后自动混淆加密JS文件

    在WebPack中调用JShaman,实现对编译打包生成的JS文件混淆加密一、插件实现1、插件JShamanObfuscatorPlugin.js,代码:class JShamanObfuscatorPlugin...JShamanObfuscatorPlugin', (compilation, callback) => {Object.keys(compilation.assets).forEach((fileName) => {// 检查文件名是否以...();} else {console.error("向JShaman.com发送请求时出现错误:", json_res, "混淆加密失败...");}// 更新compilation.assets中的文件内容为混淆后的代码...obfuscatedCode,size: () => obfuscatedCode.length,};} catch (error) {console.error(error);// 在这里可以决定如何处理错误,比如跳过当前文件或抛出异常..." years old.");}Webpack编译:生成的bundle.js,其中的js代码已被混淆加密:而如果未使用此插件,生成的bundle.js代码如下:

    42320

    【Vscode】 前端项目文件自动格式化(.Vue,.js)

    1.引言 开发vue项目,大家有没有遇到如下情况: 1.1 注释不对 在vue文件,template中注释Ctrl+/代码 //<slot name="left" :itemLeft="itemLeft...保存 <em>自动</em>格式化 JavaScript中,双引号<em>自动</em>改单引号,分号<em>自动</em>去掉 vue,模板中标签属性换行 2.安装插件 2.1 Prettier 它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式...更详尽的参考官方文档 3.配置 Ctrl+Shift+P 搜索settings.json <em>选择</em>Prefrerences:Open Settings(JSON) 有UI操作步骤,有兴趣的童鞋可以试试File-Prefrerences-Settings...michelemelluso.code-beautifier" },//scss格式化工具 "workbench.iconTheme": "vscode-icons",//vscode文件图标主题...", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化

    3K10

    JavaScript、js文件、Node.js、静态文件

    一、JavaScript 1、JavaScript认知 JavaScript(简称“JS”) 是一种解释型的脚本语言。广泛用于Web应用开发,对页面事件做出响应。...通常JavaScript脚本是通过嵌入在HTML页面中来实现自身的功能的,也可以写成单独的js文件。 JavaScript与Java名称上的近似,但是两种完全不同的语言。...文件 js文件是指包含JavaScript代码,以“.js”为扩展名的文本文档,用于在网页中执行JavaScript指令;可以说JS文件是网页JavaScript客户端脚本文件。...三、Node.js node.js – Node是一个让JavaScript运行在服务端的开发平台。...四、静态文件 定义:不是由服务器生成的文件就是静态文件 包含:web项目中的图片、css、js、文本文件txt、脚本、等静态资源,不带jsp、asp、php页面的HTML页面 特点: 1 通常存放在

    6.3K30

    js 实现选择排序及优化

    // 选择排序 // 原理:进行 n-1 趟 循环,每趟循环中遍历所有未排好序的数,第一趟循环,从第0个元素开始向后遍历,找到 最小的元素,与第1 一个元素进行交换,第二趟,从第 1 个元素开始向后遍历...找到最小值与第2个元素 进行交换,以此类推 // 从而得出规律,每次遍历元素开始位置为 i+1,并维护每轮循环的最小值的索引,一轮循环结束后,通过最小值的索引获取到最小值,与起始位置交换 // 稳定性:因为选择排序每次找到最小值...arr[minIndex] = temp; } console.log(`执行了${count}趟循环`); return arr; } console.log("普通选择排序...0, 1, 6, 5])); // 执行了9趟循环 console.log(selectSort([1, 2, 3, 4, 5, 6, 7, 8, 9, 9])); // 执行了9趟循环 // 优化选择排序...break; } } console.log(`执行了${count}趟循环`); return arr; } console.log("普通选择排序

    4.5K10

    ExcelVBA文件操作-选择文件夹获取文件列表

    ExcelVBA文件操作-选择文件夹获取文件列表 近期学习了 =====start====== 1.ExcelVBA文件操作-获得文件夹中的所有子文件夹 2.ExcelVBA-打开对话框取得文件夹路径...2种方法 =====end====== 今天要学习 注意标题,有顺序的哦: 1.先打开对话框==2.选择文件夹==3.获取文件列表 1-2两步可用我们的自定义函数 '打开对话框,选择,取得文件夹路径,...SelectGetFolder = "没有选择" End If End WithEnd Function 进入文件夹后,接下来,要读取文件夹中的的文件列表(不包含子文件夹) 【知识点...sff.Path Next GetFolderFiles = temparrEnd Function 结合两个函数,再设计出主程序,就可以完成啦 【代码】 Sub yhd_ExcelVBA_选择文件夹获取文件列表...,取得文件夹路径,返回string Function SelectGetFolder() '选择单一文件 With Application.FileDialog(msoFileDialogFolderPicker

    59320
    领券