当前位置：首页 > 全部内容 > 原生JavaScript实现带进度条的图片上传功能

原生JavaScript实现带进度条的图片上传功能

作者：闭包旅人时间：2026-10-22 02:34:22浏览：276

本文介绍如何使用原生JavaScript结合FormData和XMLHttpRequest实现带实时进度条的图片上传功能。通过封装UploadImg类，处理文件选择、前端预览、后端PHP接收及存储，并展示完整的HTML、CSS及JS代码示例，帮助开发者快速掌握无依赖的文件上传方案。

JavaScript核心逻辑实现

首先，我们需要编写核心的JavaScript逻辑。这段代码定义了一个名为UploadImg的构造函数及其原型方法，用于处理文件上传的初始化、事件绑定及进度监控。代码首先检查浏览器是否支持File和FileList API，若不支持则提示错误；若支持，则将UploadImg挂载到window对象上，以便后续实例化调用。


 ;
 (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);
    childArr[2].setAttribute('src', data.url);
    childArr[3].style.display = 'none';
    }, function(error) {
     //post 失败 
     console.log(error);
    }, childArr);
   });
   } else {  
   alert("上传个数不能为0");  
   return false;
   }
  });
  /**
  *@method (testWidthHeight) 获取上传尺寸大小
  *@param {e} 事件对象
  *@param {callback} 回调函数  
  */
  function testWidthHeight(e,callback) {
  var isSize;
  var forms = e.target;
  var reader = new FileReader();
  reader.onload = function () { 
   var dataURL = reader.result; 
   var image = new Image();
   image.onload=function(){ 
    var width = image.width;
    var height = image.height;
    isSize = width <= $u.option.Max_Width && height <= $u.option.Max_Height; 
    if(typeof callback == 'function') {
    callback(isSize);
    }   
   };  
   image.src = dataURL;
  }; 
  reader.readAsDataURL(forms.files[0]); 
  return isSize; 
  }
  },
  //遮罩层上的是事件
  maskEvent: function(childArr) {
  $u = this;
  var addBtn = childArr[4].childNodes[1].childNodes[0];
  var deleBtn = childArr[4].childNodes[1].childNodes[1];
  //当鼠标滑过
  addEvent($u.wrap, "mouseover", function() {
   if (childArr[2].getAttribute('src')) {
   childArr[4].style.top = 0;
   }
  });
  //当鼠标离开
  addEvent($u.wrap, "mouseout", function() {
   childArr[4].style.top = -300 + 'px';
  });
  //修改
  addEvent(addBtn, 'click', function() {
   childArr[0][0].click();
  });
  //删除
  addEvent(deleBtn, 'click', function() {
   $u.wrap.style.backgroundImage = "url(add-bg-upload1.jpg)";
   childArr[2].setAttribute('src', "");
  });
  },
 /**
 *@method (ajaxPost) 上传方法
 *@param {fm} 当前form表单
 *@param {url} url地址 
 *@param {fnSuc} 成功回调 
 *@param {fnErr} 失败回调 
 *@param {childArr} 节点集合  
 */
  ajaxPost: function(fm, url, fnSuc, fnErr, childArr) {
  var $u = this;
  //进度条
  var proGress = childArr[3].childNodes[0];
  if (window.XMLHttpRequest) {
   var xhr = new XMLHttpRequest();
  } else {
   var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //data数据 
  var data = new FormData(fm);
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {
   //成功回调
   if (xhr.status == 200) {
    fnSuc(xhr.responseText);
   } else {
    if (fnErr) {
    fnErr(xhr.status);
    }
   }
   }
  };
  //监听上传进度  
  addEvent(xhr.upload, "progress", uploadProgress);
  //post后台
  xhr.open('post', url);
  //发送数据
  xhr.send(data);
  //上传进度
  function uploadProgress(evt) {
   var loaded = evt.loaded; //已上传的文件大小
   var allTotal = evt.total; //总大小
   var per = Math.floor((loaded / allTotal) * 100) + '%';
   proGress.innerHTML = per;
   proGress.style.width = per;
  }
  },
 };
 //获取元素
 function $(selectors) {
  return document.querySelector(selectors);
 }
 //事件监听
 function addEvent(el, type, fn) {
  if (el.addEventListener) {
  el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {
  el.attachEvent('on' + type, function() {
   fn.call(el);
  });
  } else {
  throw new Error('not supported or DOM not loaded');
  }
 }
 //判断浏览器是否存在file属性
 if (window.File && window.FileList) {
  window.UploadImg = UploadImg;
 } else {
 alert(error);
  return false;
 }
 })(window);

PHP后端处理脚本

接下来是后端PHP处理脚本。该脚本接收前端通过POST方法提交的file字段，遍历$_FILES数组并将文件信息赋值给局部变量。脚本根据当前时间戳和原始文件名后缀生成新的存储路径，确保文件名唯一。随后，使用move_uploaded_file函数将临时上传文件移动到指定目录，并返回包含图片存储URL的JSON格式响应，供前端解析显示。


<?php
$file=$_FILES['file'];
foreach ($file as $key => $value) {
 $$key=$value;
}
$path='upload/'.time().strtolower(strstr($name, '.')); //修改上传文件的名称,strstr($name, '.')是获取后缀名
move_uploaded_file($tmp_name,$path);
$path=strstr($path,$path[0]); //图片的存储地址
$arr=array( 
 "url"=>$path
);
$json=json_encode($arr); //json
echo $json;
?>

CSS样式定义

CSS部分定义了上传控件的样式。.couser-img-upload类设置了容器的宽度、高度、光标样式及背景图片，并隐藏溢出内容。悬停时，边框颜色变为#00caac，背景图片切换。.kechenFengMian类默认隐藏，用于显示上传后的图片。.upload-progress类定义了进度条容器的样式，包括宽度、绝对定位及边框，确保进度条在上传过程中清晰可见。


 .couser-img-upload {
  width:280px;
  height:160px;  
  cursor:pointer;
  position: relative;
  overflow: hidden;
  background:url(add-bg-upload1.jpg);  
 }
 .couser-img-upload:hover{
  border: 2px solid #00caac;
  background:url(add-bg-upload.jpg);
 }
 .kechenFengMian {
  display:none;
 }
 .upload-progress{
  display: none;
  width: 90%;
  position: absolute;  
  overflow: hidden;
  border:1px solid #00caac;
  border-radius: 8px;
  top: 50%;
  margin-top: -7.5px;
  left: 50%;
  padding: 2px;
  margin-left:-46%;
  font-size: 12px;
 }
 .upload-progress .upload-son{
  display: inline-block;
  background: #00caac;
  border-radius: 8px;
  text-align: center;
  color: #fff;
 }
 .mask-Div{
  position: absolute;
  top: -300px;
  width: 100%;
  height: 100%;
 }
 .mask-Div .mask-show{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
 }
 .mask-Div .button-div{
  width: 140px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -25px;
 }
 .mask-Div .button-div span{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background:url(tianjiashanchu.png) no-repeat;
 }
 .mask-Div .button-div span.upload-btn{  
  background-position: 0px 0px;
  float: left;
 }
 .mask-Div .button-div span.deleteImg-btn{
  background:url(tianjiashanchu.png) no-repeat;
  background-position: -50px 0px ;
  float: right;
 }
 .mask-Div .button-div span.upload-btn:hover{
  background-position: 0px -50px ;
 }
 .mask-Div .button-div span.deleteImg-btn:hover{
  background-position: -50px -50px ;
 }

HTML结构与初始化

HTML结构部分展示了如何引入JS文件并初始化上传组件。页面包含一个div容器，类名为.couser-img-upload，用于触发文件选择。在script标签中，通过new UploadImg()实例化上传对象，传入配置参数：el指定触发元素的选择器，url指定后端处理接口，Max_Width和Max_Height限制图片的最大宽高。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="uploadImg.js"></script>
</head>
<body>
<div class="couser-img-upload"></div> 
<script type="text/javascript"> 
  new UploadImg({
    el:".couser-img-upload",
    url:'./upload.php',
    Max_Width:280,
    Max_Height:160
  });
</script>
</body>
</html>

以上即为使用原生JavaScript实现带进度条图片上传的完整示例。通过前端FormData封装、XMLHttpRequest监控进度，以及后端PHP的文件处理，实现了无需第三方库的文件上传功能。希望本文的内容能对您的学习或工作有所帮助，欢迎继续支持本站获取更多技术分享。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38