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

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

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

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

    文件压缩工具-RIA版

    一般我们的做法是将多个XML/txt文件打包压缩,之前使用的方法是先将资源文件使用winrar进行zip压缩,然后使用第三方的一个库nochump进行解压。...后来改进了一下,自己写了一个RIA工具,选择需要压缩文件,然后逐个读取其文件流,获取其二进制流,将每一个文件的二进制流写进一个二进制流。...然后记录下每一个文件它的偏移量和文件长度,最后压缩那一个二进制流(ByteArray类的compress方法),并保存为文件。...游戏先使用URLStream加载文件,获取二进制流,然后解压(ByteArray的compress方法),从最后开始往前读,获取二进制流内的文件信息(文件名称、偏移量、长度),根据文件的信息,就可以知道每一个文件的内容了...经过测试和实际应用,此方法比zip压缩: 1、文件小了11~12KB; 2、解析文件所消耗的时间大大缩短,内网测试一个较大的压缩文件时,消耗时长从2.5s变成700ms; 3、CPU曲线波动较之以前已经好了很多

    61310

    (624) 插件配置:轻松配置JS文件压缩

    实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心。...webpack 压缩后的代码格式: ? 这样就实现了JS代码的压缩。...devServer用于开发环境,而压缩JS用于生产环境,在开发环境中作生产环境的事情所以webpack设置了冲突报错。 在实际开发中,webpack配置文件是分开的,开发环境、生产环境各自一个文件。.../src/entry.js', //这里我们又引入了一个入口文件 entry2:'....(__dirname,'dist'), //输出的文件名称 filename:'[name].js' }, //模块:例如解读CSS,图片如何转换,压缩

    2.2K20

    JS 图片压缩

    前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...href 文件的下载地址。...上传存储图片如果需要对文件大小格式有要求的,可以统一压缩处理图片 前台页面想要编辑图片,可以在 Canvas 处理图片的时候,加一些其他逻辑,例如添加文字,剪裁,拼图等等操作 当然温馨提示:因部分接口有

    25.8K21

    【终极教程】cocos2dx-js 分批次混淆压缩js文件

    :   1> 由于我们当前游戏框架的结构是平台形式的就是一个大厅里面有若干个子游戏,所以在发布的时候得区分子游戏和大厅了解了一下 project.json 里面有一个 jsList 可以把所有放进去的js...文件压缩混淆成一个大的文件但是我们游戏的子游戏非常 这样子弄显然不合适,所以针对大厅和子游戏单独做压缩混淆  2> 这里面主要采用的是ant + Closure Compile 方式 1.先来看一下我们项目的结构...​ 游戏相关都在 GameUnit 文件夹下面,项目需求是可以选择具体游戏发布H5的所以在同随发布文件project.json 文件新增一个字段 ​ 字段内容为 GameUnit 里面项目具体的文件夹的名字...,执行写的python脚本 会通过 project.json-->gamemodules字段筛选需要打包压缩的子项目。...执行后会把混淆压缩的代码文件移动到发布目录下 ​ ​ 脚本仅供参考学习。 ​

    15910

    使用uglifyjs压缩js

    在做的web项目上线时,我们需要对js文件进行压缩,以减小文件的体积,加快加载速度,提高响应时间。下面我来介绍一个js压缩工具:uglifyjs。...最简单的使用方式: uglifyjs main.js -o main-min.js -c 下面是一些压缩时常用的参数 一些常用的参数列表 -o,--output 指定输出文件,默认情况下为命令行...懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文件就可以了!...完整代码如下: @echo off :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS SET JSFOLDER=C:\Users\Administrator\Desktop\formini...然后双击就可以批量使用uglifyjs压缩JS文件啦! 注意:uglifyjs不支持ES6

    5.7K20

    python文件压缩与解压缩

    参数说明: 1>fiename:添加文件路径; 2>arcname:归档文件路径与名称; 1.3 添加压缩数据 zipobj.writestr(zinfo_or_arcname, data, compress_type...8编码; 1.4 关闭 关闭压缩文件: zipobj.close() 1.5 一个例子: 压缩目录如下: ?...= os.path.join(logdir, name) arcname = os.path.join(basename, name) #写入要压缩文件,并添加归档文件名称 fzip.write...(member, path=None, pwd=None):解压缩一个文件到指定目录; 参数: member:压缩包中文件; path:解压缩到指定目录,默认解压到当前目录; frzip.extractall...(path=None, members=None, pwd=None):解压缩多个文件到指定目录; 参数: path:指定的解压目录; members:指定解压文件,默认解压全部; 解压指定文件到指定目录

    4.2K40

    详解 JS 压缩图片

    插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...file2Image(blob, callback); } upload(url, file, callback) 上传图片(已压缩),可以使用 FormData 传入文件对象,通过 XHR 直接把文件上传到服务器...如果你有足够的耐心传几种类型图片就会发现还存在如下问题: 压缩输出图片寸尺固定为原始图片尺寸大小,而实际可能需要控制输出图片尺寸,同时达到尺寸也被压缩目的; png 格式图片同格式压缩压缩率不高,还有可能出现.... // 用户期待的输出宽高没有大于源图片的宽高情况下,输出文件大小大于源文件,返回源文件 if (result.size > file.size && !...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

    12.7K31

    Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js压缩以及合并,文件的md5重命名 ……。...目前index.html文件中的css和js的引用路径是这样的,如下图: ? 其他目录下的html文件也是这样的,都引用的是未压缩和md5命名的css和js文件。...'); //- 压缩CSS文件; var rev = require('gulp-rev'); //- 对css、js文件名加MD5后缀 var...}) .pipe(clean()); }); /*压缩js文件,并生成md5后缀的js文件*/ gulp.task('compress-js',function (callback)...//- 文件名加MD5后缀 .pipe(gulp.dest('dist/js')) //- 另存压缩后的文件 .pipe(rev.manifest

    12.1K80
    领券