资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

原生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://cdkjz.cn/article/ppoido.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
达州服务器托管黔盛装饰广告品牌策划设计成都营销网站建设重庆网站建设鸿艺文化成都茶叶销售成都做网站建设公司网站方案雅安托管服务器

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图