这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了原生 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 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0513/334257.html