使用 jQuery 上传带有进度条的图像

2025年3月17日 | 阅读 8 分钟

本文将通过各种示例解释如何使用 jQuery 和进度条上传图片。首先，我们了解用于上传文件的 HTML input [] 字段以及对进度条的 jQuery 理解。进度条显示文件上传的百分比和已上传文件的数量。

以下是使用 jQuery 和进度条上传图片的示例。

示例 1

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"> 
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  text-align: center;
}
h1 { 
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: "Lucida Console", "Courier New", monospace;
  letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.dropzone {
    background: white;
    border-radius: 5px;
    max-width: 500px;
    margin:50px  auto;
    padding: 0 0;
    height: auto;
    min-height: 50px;
}
.dropzone.dz-clickable {
    cursor: pointer;
    background: #fafafa;
    color: #396E90;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    border:1px solid #cccccc;
    border-radius: 2px;
}
.dropzone .camera-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 15px;
    position: absolute;
    left: 0;
}
.dropzone .img-circle { position: relative; display: inline-block; padding-left: 45px; }
.dropzone .camera-img img {
    width: 100%;
    height: 100%;
    display: block;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid transparent; 
}
.dropzone .dz-message { margin: 15px; }
.dropzone .dz-preview .dz-details .dz-size { display: none; }
.dropzone .dz-preview .dz-details {
    height: 50px;
    min-height: 50px;
    padding:0;
    padding-left: 25px;
    text-align: left;
    display: flex;
    align-items: center;
    opacity: 1;
    justify-content: space-between;
}
.dropzone .dz-preview.image__open .dz-details {
    padding-left: 55px;
}
.dropzone .dz-preview { width: 100%; height: 50px; min-height: 50px; margin: 0; }
.dropzone .dz-preview .dz-progress {
    left: -1px;
    right: -1px;
    margin: 0;
    top: -5px;
    height: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: auto;
}
.dropzone .dz-preview .dz-image {
    height: 50px;
    width: 50px;
    border-radius: 0 !important;
    display: none;
}
.dropzone .dz-preview .dz-details .dz-filename { display:flex; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
     transform: none; 
     -webkit-filter: none; 
     filter: none; 
}
.dropzone .dz-preview .dz-image img {
     height: 100%;
     width: 100%;
}
.dropzone .dz-preview .dz-progress .dz-upload {
    background: #396E90;   
}
.dropzone .dz-preview .dz-error-message {
    top: auto;
    left: 0;
    background: linear-gradient(to bottom, #ff0000, #ff0000);
    background: #ff0000;
}
.dropzone .dz-preview .dz-error-message:after {
    border-bottom: 6px solid #ff0000;
}
.dropzone .dz-preview .dz-remove {
    color: #396E90;
    text-decoration: none;
    padding: 0 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 999999;
}
.dropzone .dz-preview .dz-remove:hover {
    text-decoration: none;
}
.dropzone .dz-preview.image__open .dz-image { display: block; }
.dropzone .dz-preview.image__open .uploading { display: none; }
</style>
<body>
<div class = "wrapper">
<h2> Example </h2> 
    <h1> Upload image with progressbar. </h1>
    	<input type = "hidden" name = "resume_file_url" id = "id_resume_file_url">
        <section>
            <div id = "dropzone">
                <form class = "dropzone needsclick demo-upload" action = "/upload">
                    <div class = "dz-message needsclick">
                        <div class = "img-circle"> <i class = "camera-img"> <img src = "images/photo-camera.svg" alt = " "> </i> Add image of slide. </div>
                    </div>
                </form>
            </div>
        </section>
        <div id = "preview-template" style = "display: none;">
            <div class = "dz-preview dz-file-preview">
            	<div class = "dz-image"> <img data-dz-thumbnail = " "> </div>
                <div class = "dz-details">
                    <div class = "dz-filename"> <span class= "uploading"> Uploading - </span> <span data-dz-name = " "> </span> </div>
                </div>
                <div class = "dz-progress"> <span class = "dz-upload" data-dz-uploadprogress = " "> </span> </div>
                <div class = "dz-error-message"> <span data-dz-errormessage = " "> </span> </div>
            </div>
        </div>
<script>
var dropzone = new Dropzone('.demo-upload', {
  url: "/upload/",      
  maxFilesize: 4,
  addRemoveLinks: true,
  acceptedFiles: ".jpeg, .jpg, .png, .gif, .WebP, .svg",
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  parallelUploads: 2,
  thumbnailHeight: 50,
  thumbnailWidth: 50,
  maxFilesize: 1,
  filesizeBase: 100000000000,
  success: function(file, response) {
   file.previewElement.classList.add("image__open");
 },
 thumbnail: function(file, dataUrl) {
  if (file.previewElement) {
    file.previewElement.classList.remove("dz-file-preview");
    var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
    for (var i = 0; i < images.length; i++) {
      var thumbnailElement = images[i];
      thumbnailElement.alt = file.name;
      thumbnailElement.src = dataUrl;
    }
    setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 800);
  }
}

});
var minSteps = 6,
maxSteps = 100,
timeBetweenSteps = 300,
bytesPerStep = 10000;
dropzone.uploadFiles = function(files) {
  var self = this;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(function(file, totalSteps, step) {
        return function() {
          file.upload = {
            progress: 100 * (step + 1) / totalSteps,
            total: file.size,
            bytesSent: (step + 1) * file.size / totalSteps
          };
          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
          if (file.upload.progress == 100) {
            file.status = Dropzone.SUCCESS;
            self.emit("success", file, 'success', null);
            self.emit("complete", file);
            self.processQueue();
          }
        };
      }(file, totalSteps, step), duration);
    }
  }
}
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 和进度条上传图片的示例。在这个示例中，我们还提供了一个删除已上传文件的选项。

输出

以下是这个例子的输出。

Upload image with progress bar using jQuery

示例 2

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<style>
#up-wrap {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
#up-wrap * {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
h1  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
#up-wrap {
  width: 500px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}
#up-progress, #up-bar, #up-percent { height: 30px; }
#up-progress {
  position: relative;
  background: #fff;
}
#up-bar {
  background: #d3e3ff;
  width: 0;
  transition: width 0.5s;
}
body {
  background: hsl(217.6,100%,80%);
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
#up-percent {
  position: absolute; top: 0; left: 0;
  width: 100%; display: flex;
  align-items: center; justify-content: center;
}
#up-file { display: none; }
#up-label {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  color: #fff;
  border: 1px solid #dfdfdf;
  background: #296cd0;
  cursor: pointer;
}
#up-file:disabled ~ #up-label { background: #b1b1b1; }
body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#upload {
  width: 100%; height:100px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 640 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
#up-wrap { text-align: center; }
#up-wrap h1 { margin: 0 0 40px 0; }
#up-demo { margin-top: 10px; }
#code-boxx {
  font-weight: 600;
  margin-top: 50px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}
</style>
<div id = "up-wrap">
  <div id = "upload"> </div>
  <h1> Example </h1>
 <h1> Upload image with progress bar using jQuery </h1>
  <div id = "up-progress">
    <div id = "up-bar"> </div>
    <div id = "up-percent"> 0% </div>
  </div>
  <input type = "file" id = "up-file" >
  <label for = "up-file" id = "up-label">
    Select File
  </label>
</div>
<script>
var uprog = {
  hBar : null,    
  hPercent : null, 
  hFile : null,    
  init : () => {
    uprog.hBar = document.getElementById("up-bar");
    uprog.hPercent = document.getElementById("up-percent");
    uprog.hFile = document.getElementById("up-file");
    uprog.hFile.onchange = uprog.upload;
    uprog.hFile.disabled = false;
  },
  update : (percent) => {
    percent = percent + "%";
    uprog.hBar.style.width = percent;
    uprog.hPercent.innerHTML = percent;
    if (percent == "100%") { uprog.hFile.disabled = false; }
  },
    upload : async () => {
    let file = uprog.hFile.files[0];
    uprog.hFile.disabled = true; 
    uprog.hFile.value = ""; 
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(25);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(50);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(75);
    await new Promise(e=>{setTimeout(e,500)});
    uprog.update(100);
        let xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append("upfile", file);
    xhr.open("POST", "upload.php");
    let percent = 0, width = 0;
    xhr.upload.onloadstart = (evt) => { uprog.update(0); };
    xhr.upload.onloadend = (evt) => { uprog.update(100); };
    xhr.upload.onprogress = (evt) => {
      percent = Math.ceil((evt.loaded / evt.total) * 100);
      uprog.update(percent);
    };
       xhr.onload = function () {
      if (this.response!= "OK" || this.status!=200) {
        console.log(this);
        console.log(this.response);
        console.log(this.status);
      } else {
        uprog.update(100);
             }
    };
    xhr.send(data);
  }
};
window.addEventListener("load", uprog.init);
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 和进度条上传图片的示例。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
	<head>
		<title> Upload image with progress bar using jQuery
 Example </title>
		<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<link href = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"> 
<link href = "https://fonts.googleapis.com/css?family=Roboto" rel = "stylesheet"> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"> </script> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<style>
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
<body>
<h1> Example </h1>
 <h2> Upload image with progress bar using jQuery </h2>
<form id = "upload_form" enctype = "multipart/form-data" method = "post">
  <input type = "file" name = "file1" id = "file1" onchange = "uploadFile()"> <br>
  <progress id = "progressBar" value = "0" max = "100" style = "width:300px;"> </progress>
  <h3 id="status"> </h3>
  <p id = "loaded_n_total"> </p>
</form>
<script>
function _(el) {
  return document.getElementById(el);
}
function uploadFile() {
  var file = _("file1").files[0];
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php"); 
  ajax.send(formdata);
}
function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; 
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个使用 jQuery 和进度条上传图片的示例。在此，领先的进度条显示了百分比

输出

以下是这个例子的输出。

下一个话题如何使用 jQuery 向 select 元素添加选项

使用 jQuery 上传带有进度条的图像

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jQuery 上传带有进度条的图像

示例 1

示例 2

示例 3

相关帖子

Jquery 倒计时器

JQuery 裁剪插件

Twenty Twenty jQuery 插件用于比较图像

圆形滑块 jQuery 插件

jQuery 翻页

使用 JQuery 创建待办事项列表

水平可滚动时间线插件 - jTimeline

使用 JQuery Ajax 的动态拖放表行

jquery cookie 同意插件

使用 jquery 的全屏视频背景

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器