原生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 >' +
   '<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
$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代碼：

 .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代碼：

<!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如何實現上傳圖片帶進度條”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！