原生JavaScript实现图片上传带进度条的实战教程
59KB |
更新于2024-09-02
| 50 浏览量 | 举报
收藏
立即下载 本文将深入探讨如何在原生JavaScript中实现上传图片功能，并且带有进度条显示，以提供清晰的用户体验。我们将通过实例讲解以下关键知识点：
1. **环境兼容性**：首先，确认了上传控件的浏览器兼容性，如果浏览器不支持，会提示用户更换或更新浏览器。
2. **类结构与构造函数**：文章定义了一个名为`UploadImg`的构造函数，它接收一个配置对象作为参数，这个构造函数用于初始化上传组件并设置其属性。
3. **初始化方法** (`init`)：在这个方法中，作者创建了一个HTML模板，包括一个用于选择文件的`<input type="file">`元素、一个预览图片的`<img>`标签以及一个进度条容器`<div class="upload-progress">`。同时，还添加了覆盖层（如遮罩层和按钮）以便于用户操作。
4. **生成和插入模板**：`_creatFrom`方法负责将HTML模板插入到指定的元素(`option.el`)中，从而构建完整的上传界面。
5. **事件监听** (`eventChange`)：这个方法用于监听`<input type="file">`的变化事件，当用户选择图片后，可以触发后续的文件读取和上传过程。
6. **文件上传处理**：尽管这部分内容没有具体展示，但可以推测会有`submit`事件或者`FormData`对象的使用，用来发送图片数据到服务器。在这个过程中，JavaScript会监控上传进度，通过改变`<span class="upload-son">`中的文本或使用`xhr.upload`对象的`onprogress`方法来更新进度条。
7. **进度条显示**：关键部分是实现上传进度条的动态更新，这通常涉及在上传期间测量已发送的数据量与总大小的比例，并将其转换为可视化的进度。可能使用`xhr`对象的`progress`事件来获取上传进度，并更新DOM中的进度条元素。
8. **用户交互**：文中提到的`deleteImg-btn`可能是用于取消上传或者删除选中的图片，这涉及到额外的事件处理和可能的文件撤销逻辑。
9. **清除资源**：`_removeFrom`方法可能是为了销毁或重置组件时调用，以确保资源的正确释放和界面的整洁。
这篇文章为开发者提供了使用原生JavaScript实现图片上传功能，并结合进度条展示的完整示例，这对于理解和实践前端文件上传功能非常实用。通过阅读和模仿这份代码，开发者可以提升自己的JavaScript技能，尤其是在处理异步操作和用户界面交互方面。
原生原生javascript上传图片带进度条【实例分享】上传图片带进度条【实例分享】
本文主要介绍了原生javascript上传图片带进度条的实例详解。具有很好的参考价值。下面跟着小编一起来看下
吧
javascript代码：代码：
;
(function(w) {
var error = "上传控件不支持您的浏览器！";
// 构造函数
function UploadImg(option) {
$u = this;
$u.option = option;
$u.init($u.option);
}
UploadImg.prototype = {
//初始化
init: function() {
var $u = this;
//template
$u.addupLoader =
'<form enctype="multipart/form-data">' +
'<label style="display:block;width:100%;cursor:pointer;height:100%;position: absolute;">' +
'<input class="kechenFengMian" type="file" capture="camera" name="file"/>' +
'</label>' +
'</form> ' +
'<img src="" width="280" height="160" />' +
'<div class="upload-progress"><span class="upload-son">等待中……</span></div>' +
'<div class="mask-Div">' +
'<div class="mask-show"></div>' +
'<div class="button-div">' +
'<span class="upload-btn"></span>' +
'<span class="deleteImg-btn"></span></div>' +
'</div>';
$u.wrap = $($u.option.el);
$u._creatFrom();
$u.eventChange($u.wrap.childNodes);
},
//生成form模板
_creatFrom: function() {
this.wrap.innerHTML = $u.addupLoader;
},
_removeFrom: function() {
this.wrap.innerHTML = "";
},
//事件触发
/*
*对于onchange事件若值没有发生改变的话
*此事件就会失效所以在这里打算将DOM移除
*直接初始化所有方法和事件
*
*/
/**
*@method (eventChange)
*@param {childArr} 参数为数组集合
*/
eventChange: function(childArr) {
var $u = this;
//提交form表单
addEvent(childArr[0], 'change', function(e) {
//保存当前this对象
var thisForm = this;
if (!thisForm['file'].files.length == 0) {
$u._removeFrom();
$u.init();
testWidthHeight(e,function(iSsize){
if(!iSsize){
alert("上传的尺寸为:长为"+$u.option.Max_Width +"宽为"+$u.option.Max_Height);
return false;
}
childArr[2].setAttribute('src', "");
childArr[3].style.display = 'block';
$u.wrap.style.background = "#f3f3f3";
//发送post请求
$u.ajaxPost(thisForm, $u.option.url, function(result) {
//post成功
var data = JSON.parse(result);
$u.maskEvent(childArr);
下载后可阅读完整内容，剩余4页未读，继续阅读
开通会员，免费下载（低至0.43元/天)
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
付费资源9折优惠
相关推荐
