原生JavaScript实现图片上传带进度条的实战教程

8 浏览量更新于2024-09-02 收藏 59KB PDF 举报

本文将深入探讨如何在原生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页未读，立即下载

weixin_38712578

粉丝: 4
资源: 930

原生JavaScript实现图片上传带进度条的实战教程

新 ASP无组件上传带进度条 （源码 + 实例）

ASP无组件上传带进度条（源码+实例）

原生JavaScript实现动态加载进度条实例与代码

原生JavaScript实现图片上传进度条

进度条实例

模拟进度条实例

带进度条文件上传实例

使用Ajax实现简单的带百分比进度条实例

一个原生的用户等级的进度条

Android Webview添加网页加载进度条实例详解

最新资源

新 ASP无组件上传带进度条（源码 + 实例）