阿坝州网站建设公司

原生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 =
   '' +
   '' +
   '' +
   '' +
   ' ' +
   '' +
   '等待中……
' +    '' +    '
' +    '' +    '' +    '
' +    '
';   $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代码：

 $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代码：




  
  
  


 
 
  new UploadImg({
    el:".couser-img-upload",
    url:'./upload.php',
    Max_Width:280,
    Max_Height:160
  });

以上是“原生javascript如何实现上传图片带进度条”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享文章：原生javascript如何实现上传图片带进度条
文章来源：http://azwzsj.com/article/ppoido.html

其他资讯