Javascript知识汇总------手写图片上传插件
下面这段代码是自己手写的依赖于jquery简易图片上传前端插件,有需要的小伙伴可以拿去用哈~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .picUpCont label { width: 100%!important; } .picUpWrap { width: 100%; overflow: hidden; text-align: center; padding-right: 15px; padding-bottom: 5px; } .fileBox { width: 100px; height: 100px; margin-bottom: 30px; float: right; position: relative; } .fileBox .fileBox_addBtn { width: 100%; height: 100%; font-size: 40px; line-height: 100px; text-align: center; color: #666; border: 1px dashed #ccc; box-sizing: border-box; } .fileBox .fileBox_showImg{ position: absolute; width: 100%; top: 0; bottom: 0; left: 0; margin: auto; } .fileBox input { display: none; } .fileBox .fileBox_discription{ position: absolute; width: 100%; bottom: -25px; text-align: center; color: #999; font-size: 14px; text-decoration: underline; } .fileBox_loading { position: absolute; width: 100%; background: url('https://files.cnblogs.com/files/iwzyuan/loading.gif') center center no-repeat; background-size: 50px 50px; height: 100%; } .showPic { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; display: none; overflow: auto; } .showPic .showPic_mask { background: rgba(0,0,0,.5); position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; display: block; } .showPic .showPic_img { position: absolute; width: 90%; height: auto; top: 50%; z-index: 2; transition: all .5s; opacity: 0; left: 0; right: 0; margin: auto; } .showPic .showPic_loading { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style> </head> <body> <input class="pic1" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/> <input class="pic1" uploadUrl='./img.jpg' type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> (function ($,global){ function PicUpload(inputFile){ this.settings = { //设置默认参数 'space' : 10, //左右margin值 'size' : 3, //文件大小上限 'ajaxUrl' : '' //服务端请求路径 }; this.inputFiles = $('.'+inputFile); this.showImgDom = null; this.inputFileClassName = inputFile; } PicUpload.prototype.init = function (options){ /* 初始化 */ $.extend(this.settings, options); //参数覆盖 this.setStyle(); //改变样式 this.addEvents(); //为各个元素添加事件 } PicUpload.prototype.setStyle = function (){ /* 生成图片上传样式 */ var This = this; this.inputFiles.each(function (index,val){ This.detailStyle.setStyle(val,This); //设置上传样式 }); this.showImgDom = $('.fileBox_showImg'); this.fileBox_addBtn = $('.fileBox_addBtn'); this.fileBox_discription = $('.fileBox_discription'); } PicUpload.prototype.addEvents = function (){ /* 为inputFile和img添加事件 */ var This = this; this.fileBox_addBtn.each(function (index,val){ //点击触发file文件上传click $(val).click(function (){ $(this).siblings('.'+This.inputFileClassName).trigger("click"); }) }) this.inputFiles.each(function (index,val){ //点击触发file文件上传click $(this).change(function (){ This.httpGetPic($(this)); }) }) this.fileBox_discription.each(function (index,val){ //点击触发file文件上传click $(this).click(function (){ $(this).siblings('input').trigger('click'); }) }) this.showImgDom.each(function (index,val){ //点击触发查看大图模式 $(this).click(function (){ var originalUrl = $(this).siblings('input').attr('originalUrl'); This.detailStyle.showoriginalPic(originalUrl) }) }) } PicUpload.prototype.httpGetPic = function ($currInput){ /* ajax请求上传图片的url */ var This = this; var imgUrlBefor = $currInput.attr('uploadUrl'); var filesInfo = $currInput[0].files[0]; if(!filesInfo) return; if (!/image\/\w+/.test(filesInfo.type)) { //图片格式判断 this.tips('请上传正确格式的图片') return false; }else if(filesInfo.size > 1024*1024*this.settings.size){ //图片大小判断 this.tips('图片大小不能超过'+this.settings.size+'Mb'); return false; } var formData = new FormData(); formData.append('file_upload', filesInfo); this.detailStyle.showLoading($currInput) console.log(formData) return; $.ajax({ url: This.settings.ajaxUrl, //参数在init调用时传进来 type: 'POST', data : formData, dataType: 'JSON', cache: false, processData: false, contentType: false, success : function(res){ console.log(res); var originalUrl = '/'+res.original; var imgUrl = '/'+res.data; This.detailStyle.showPic($currInput,imgUrl,originalUrl); //更换后的url This.detailStyle.hideLoading($currInput); }, error : function(res) { console.log(res) } }); } PicUpload.prototype.httpDeletePic = function (imgUrlBefor){ /* ajax请求删除上传之前的图片 */ } PicUpload.prototype.detailStyle = { //DOM操作汇总 "setStyle" : function (val, This){ //生成上传样式 var imgUrl = $(val).attr('uploadUrl'); var originalUrl = $(val).attr('originalUrl'); if( !imgUrl ){ $(val).css({'display':'none'}). wrap('<div class="fileBox"></div>'). after('<div class="fileBox_addBtn">+</div>'). after('<img class="fileBox_showImg" style="display:none;">'). after('<div class="fileBox_loading" style="display:none;"></div> '). after('<div class="fileBox_discription" style="display:block;">点击上传</div> '). parent('.fileBox').css({ marginLeft : This.settings.space, marginRight : This.settings.space }) }else { $(val).css({'display':'none'}). wrap('<div class="fileBox"></div>'). after('<div class="fileBox_addBtn" style="display:none;">+</div>'). after('<img class="fileBox_showImg" src="'+imgUrl+'" originalUrl="'+originalUrl+'"> '). after('<div class="fileBox_loading" style="display:none;"></div> '). after('<div class="fileBox_discription" style="display:block;">点击更换</div> '). parent('.fileBox').css({ marginLeft : This.settings.space, marginRight : This.settings.space }) $(val).siblings('.fileBox_showImg')[0].onload = function (){ var height = this.clientHeight+'px' this.style.height = height; // this.style.marginTop = height/2; } } }, 'showPic' : function ($currInput,imgUrl,originalUrl){ //展示接收的图片DOM操作 $currInput.attr('uploadUrl',imgUrl).attr('originalUrl',originalUrl).siblings('.fileBox_showImg'). css('display','block').attr('src',imgUrl). siblings('.fileBox_addBtn').css('display','none') $currInput.siblings('.fileBox_discription').text('点击更换') }, 'showLoading' : function ($currInput){ //展示loading样式 $currInput.siblings('.fileBox_discription').text('上传中...'); $currInput.siblings('.fileBox_addBtn').css('display','none'); $currInput.siblings('.fileBox_loading').css('display','block'); }, 'hideLoading' : function ($currInput){ //隐藏loading样式 $currInput.siblings('.fileBox_loading').css('display','none') }, 'showoriginalPic' : function (originalUrl){ //展示大图 $('body').append('<div class="showPic"><div class="showPic_mask"></div><img class="showPic_loading" src="https://files.cnblogs.com/files/iwzyuan/loading.gif"><img class="showPic_img" src="'+originalUrl+'"></div>'); $('.showPic').css('display','block'); $('.showPic_img').load(function (){ var marTop = $(this)[0].clientHeight/2; $('.showPic_loading').css('display','none'); $('.showPic_img').css({'opacity':1,'marginTop':-marTop}); }); $(".pic").on(' touchstart',function(){ $(".pic").on('touchmove',function(event) { event.preventDefault(); }, false); }) $('.showPic').click(function (){ $(this).remove(); }); } } PicUpload.prototype.tips = function (msg){ //tips样式,此处用了最简易的alert alert(msg); } global.PicUpload = PicUpload; })(jQuery,this); </script> <script> var picUploadObj = new PicUpload('pic1'); picUploadObj.init({ size : 50, space : 30, ajaxUrl : 'xxx.php' }); </script> </body> </html>