使用jquery.form.js实现文件上传及进度条前端代码

2023-04-09 15:57:02JavaScript025

使用jquery.form.js实现文件上传及进度条前端代码,第1张

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。

去掉hidden的class，看到的效果是这样的

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面，绑定方式就随意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'//上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden")progress.width(percentVal)status.html(percentVal)}, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'progress.width(percentVal)status.html(percentVal)console.log(percentVal, position, total)}, success: function (result) { percentVal = '100%'progress.width(percentVal)status.html(percentVal)//获取上传文件信息 uploadFileResult.push(result)// console.log(uploadFileResult)$(".upload-file-result").html(result.name)$("#upload-input-file").val('')}, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown)$(".upload-file-result").empty()} })

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以参考官网

在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。

本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。

本文参考网道，总结而来。另外，强烈推荐网道，可以去网道的官方看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。

FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。

input 标签，将type设为file，之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于操作二进制文件，arraybuffer用于操作内存。

blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。