Pure JS (3.2): 上传下载 (HTML5 与 Flash 上传实现,配置项说明)
接着上一篇文章的话题,本文主要讲解 HTML5 方式的上传,FLash 方式上传客户端的实现,并说明 pure.upload 组件的配置项。
服务器端的实现在上一篇文章已经说明过了,这里就不再重复了。
HTML5 方式上传
HTML5方式上传,实际上是解决将文件数据放在请求的 body 中,而不使用 mutipart/form-data 格式进行封装。
实现思路如下:
1. 创建 XMLHttpRequest 对象
2. 配置上传进程中的回调函数
3. 配置上传完成时的回调函数
4. 开始上传
具体实现如下:
upload: function(id, params){
// 根据 id 获取文件
var file = files[id], name = file.name,size = file.size;
// 创建 XMLHttpRequest
xhrs[id] = new XMLHttpRequest();
// 配置上传进程中的回调函数
xhrs[id].upload.onprogress = function(e){
if (e.lengthComputable){
onUploadProgress(id, name, e.loaded, e.total)
}
};
// 配置上传完成时的回调函数
xhrs[id].onreadystatechange = function(){
if (xhrs[id].readyState == 4){
if (!files[id]) return;
onUploadProgress(id, name, size, size);
var response = $.parseJSON(xhrs[id].responseText);
onUploadComplete({id:id, name: name, size:size}, response);
delete files[id];
delete xhrs[id];
}
};
// 设置上传参数,并生成上传 URL
params.Filedata = name;
var action = options.action + '?' + $.param(params);
// 开始上传
xhrs[id].open('POST', action, true);
xhrs[id].setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhrs[id].setRequestHeader('Content-Type', 'application/octet-stream');
xhrs[id].send(file);
}
Flash 方式上传
Flash 方式上传需要结合使用 ActionScript 和 JavaScript,利用 ActionScript 的 ExternalInterfate 进行交互。
ActionScript 部分的实现思路如下:
1. 遍历从文件选择对话框中选取的文件
2. 配置上传进程中的回调函数
3. 配置上传完成时的回调函数
4. 利用获得的 FileReference 的 upload 方法进行上传。
具体实现如下:
private function upload(files:Array):void {
// 遍历从文件选择对话框中选取的文件
eachFile(function(file:FileReference, i:Number):void {
var id:Number = files[i].id;
uploadingFiles[id] = file;
// 配置上传进程中的回调函数
file.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {
call("onProgress", { id: id, loaded: e.bytesLoaded, total: e.bytesTotal });
});
// 配置上传完成时的回调函数
file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function(e:DataEvent):void {
delete uploadingFiles[id];
call("onComplete", { file: files[i], result: e.data } );
});
// 利用获得的 FileReference 的 upload 方法进行上传
file.upload(new URLRequest(params.url));
});
}
JavaScript 部分需要将注册到 Flash 的函数调用映射到不同上传方式共用的函数。
具体实现如下:
callbacks: {
// Other codes ...
// 将上传进程回调函数映射到 onUploadProgress(...)
onProgress: function(o) {
onUploadProgress(o.id, null, o.loaded, o.total);
},
// 将上传完成时的回调函数映射到 onUploadComplete(...)
onComplete: function(o) {
onUploadComplete(o.file, $.parseJSON(o.result));
delete sizeArray[o.file.id];
}
}
配置项
上一遍文章中已经提到了 pure.upload 用法:
pure.upload({
element: $uploader[0],
action: 'api',
params: { action: 'upload' },
sizeLimit: 1000 * 1024 * 1024,
onComplete: function(file, data){
// Do more after upload complete ...
}
});
这里传给 upload 的 object 的属性就是配置项了。
【基本配置项】
element: 上传组件的容器,可以是 div 或 span
action: 上传 URL
params: object,表示发送到服务器端的额外参数
sizeLimit: 上传总大小限制
template: HTML 片段,作为上传组件的模板,其中 {tip} 表示提示信息
fileTemplate: HTML 片段,作为正在上传的文件条目的模板
【回调函数】
allowedExtensions: 表示允许的扩展名
onSubmit(id, fileName): 开始上传的回调函数
onComplete(file, data): 上传完成时的回调函数
showMessage: 显示信息的方式,默认为 alert(message)
【消息配置】
用 messages 属性(object类型)进行消息配置。
可配置的消息包括:
typeError: 文件类型错误,默认为 '{file} has invalid extension. Only {extensions} are allowed.'
sizeError: 文件大小错误,默认为 'Total size is too large, maximum size is {sizeLimit}.'
emptyError: 文件为空时的错误,默认为 '{file} is empty, please select files again without it.'
onLeave: 文件正在上传时离开页面的提示,默认为 'The files are being uploaded, if you leave now the upload will be cancelled.'
sizeTip: 文件大小限制提示信息,默认为 'Maximum total size is {sizeLimit}. '
ddTip: 拖拽支持提示,默认为 'Drag and Drop is Supported.'
【CSS Class 配置】
用 classes 属性(object类型) 配置上传组件对应的各部件的 CSS Class。
button: 上传按钮,默认为 'pure-upload-button'
drop: 拖拽区域,默认为 'pure-upload-drop-area'
dropActive: 鼠标滑入时的拖拽区域,默认为 'pure-upload-drop-area-active'
list: 上传中的文件列表,默认为 'pure-upload-list'
file: 上传中的文件名称,默认为 'pure-upload-file'
spinner: 上传中的文件的进度条,默认为 'pure-upload-spinner'
size: 上传中的文件大小,默认为 'pure-upload-size'
cancel: 取消上传的链接,默认为 'pure-upload-cancel'
buttonFocus: 焦点位于上传按钮时的样式,默认为 'pure-upload-button-focus'
buttonHover: 鼠标滑过上传按钮时的样式,默认为 'pure-upload-button-hover'
【Flash 属性配置】
用 flashSettings 属性(object类型) 配置 flash 上传按钮
swfPath: swf 文件路径,默认为 'swf/pure.upload.swf',
url: 上传 url,默认为 options.action + '?' + $.param(options.params),
image: flash 按钮图片路径,默认为 'images/pure.upload.png',
width: 按钮宽度,默认为 107
height: 按钮高度,默认为 31
text: 文字,默认为 'Upload a file',
textStyle: 文字样式,默认为 'font-family: Arial; font-size: 12px',
textTop: 文字上方开始位置,默认为 6
textLeft: 文字左边开始位置,默认为 17
【返回对象支持的方法】
通过pure.upload(...)方法返回的对象支持以下方法:
reset(): 重置uploader
uploading(): 检查是否有文件还在上传中
分享到:
相关推荐
内容: 该数据集由Bornemann H、Oosthuizen WC、Schröder M等人于2014年发布,记录了来自Filchner Trough的威德尔海豹(FIL2014_wed_a_f_05)的最大潜水深度。数据集包含了1413个数据点,为研究威德尔海豹的潜水行为提供了宝贵资料。可以通过以下链接访问完整数据集:"" ()。
魔众帮助中心系统基于PHP开发,支持支持快捷导航和常见问题,帮助您搭建一套全面的帮助中心系统。 魔众帮助中心系统发布v3.3.0版本,新功能和Bug修复累计10项,系统内核升级,界面显示优化。
【负荷预测】布谷鸟(CS)算法优化BP神经网络的负荷及天气预测(Matlab代码实现)
【Java】Springboot整合Quertz动态定时任务_pgj
数电大作业篮球竞赛30s计时器源代码及报告
该项目是一款采用Vue框架开发的智能化车间库存盘点系统源码,整合了Java、JavaScript、HTML、Shell等多种编程语言,共计包含249个文件。其中,Java源文件77个,Vue组件72个,JavaScript脚本38个,SCSS样式表26个,XML配置文件10个,SVG图形5个,JSON数据3个,Git忽略文件2个,Markdown文档2个,ICO图标2个,全面支持车间库存管理需求。
C# - 图片抠像 - PP.Matting.HRNET - 含模型 - 完整可运行 。Sdcb.PaddleInference.dll, YamlDotNet.dll,ppmatting-hrnet_w18-human_512
该项目是一款基于C#语言的Cherish科普闯关游戏设计源码,包含107个文件,其中包括56个元数据文件、45个C#源代码文件、4个预制体文件和2个Markdown文件。游戏旨在提供寓教于乐的科普体验。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
该项目为基于Java开发的在线书城设计源码,包含55个文件,涵盖41个Java源文件、10个XML配置文件、2个Git忽略文件、1个YAML文件和1个TXT文件。
sediment core GeoB17621-1的文档记录 内容 Lucchi, RG; Sabbatini, A; Nicolaisen, LS 等(2014)发布了关于沉积物岩芯GeoB17621-1的详细文档。该文档可通过DOI:"10.1594/PANGAEA.838871" () 获取。不过,当前文档的大小信息尚未提供。此研究对于了解特定地质层的历史及其变化具有重要意义。
图像处理新思路:微生物菌落图像分割
【Java】Springboot整合Quertz动态定时任务
无人机目标检测系统源码和数据集:改进yolo11-efficientViT
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
该项目是一款基于SpringBoot和Vue框架构建的Java智能教学资源推荐及在线问卷调查系统源码,包含144个文件,其中包括74个Vue组件文件、23个JavaScript脚本文件、22个PNG图片文件、7个JPG图片文件、5个CSS样式文件、3个Markdown文档、3个批处理文件、2个JSON配置文件、1个ICO图标文件和1个HTML文件。系统通过智能算法推荐教学资源,并支持在线问卷调查功能,适用于提升教学质量和学生学习体验。
基于树莓派和OpenCV的人脸识别
【springboot】springboot系列学习,现如今已经整合了redis(缓存中间件,键值数据库),kafka(消息中间件)