原生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 = '<form enctype="multipart/form-data">' + '<label >' + '<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如何实现上传图片带进度条”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!