网站建设 >

查看其它板块

原生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如何实现上传图片带进度条
文章URL：http://www.cdkjz.cn/article/ppoido.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

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

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

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

在线咨询提交需求

友情链接交换友情链接

seo优化排名成都400电话申请腾讯云免备案空间雅安网站建设广安网站建设成都做网站酒柜书柜鞋柜定制响应式报价四川艾名斯升施印刷

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

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

网站建设

网站推广

案例

方案

电商网站开发

微信小程序

我们

联系

精准传达 • 有效沟通

查看其它板块

原生javascript如何实现上传图片带进度条

多一份参考，总有益处

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

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

友情链接交换友情链接

网络推广

Network promotion

网站方案

Solution

电商网站开发

E-commerce & System

我们

About Us

联系

Contact Us

精准传达 • 有效沟通

查看其它板块

原生javascript如何实现上传图片带进度条

相关资讯

ftl文件写java代码 ftl文件用什么工具编辑

go语言申请软著 go语言图书

统计java文件代码行数 统计java文件代码行数和列数

python涉不涉及函数 python的函数不包含以下哪种

帝国cms修改模板变量 帝国cms模板文件

zblog精美模板 zblog个人博客模板

wordpress特色 wordpress样式

sapjam安卓系统的简单介绍

多一份参考，总有益处

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

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

友情链接 交换友情链接

统计java文件代码行数统计java文件代码行数和列数

帝国cms修改模板变量帝国cms模板文件

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

友情链接交换友情链接