原生javascript上传图片带进度条【实例分享】


Posted in Javascript onApril 06, 2017

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 style="display:block;width:100%;cursor:pointer;height:100%;position: absolute;">' +
   '<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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
vue.js指令和组件详细介绍及实例
Apr 06 #Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
You might like
php 无极分类(递归)实现代码
2010/01/05 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php无限级分类实现方法分析
2016/10/19 PHP
js prototype截取字符串函数
2010/04/01 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js 操作符汇总
2014/11/08 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python tkinter实现屏保程序
2019/07/30 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
护士自荐信
2013/10/25 职场文书
挂职思想汇报
2013/12/31 职场文书
委托书范文
2014/04/02 职场文书
小学数学课题方案
2014/06/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2016年教师新年寄语
2015/08/18 职场文书