假设现在有个按钮点击上传,那么直接在按钮上加上onclick事件写上对应的方法即可,比如这样
<a href="javascript:;" class="btnupload" onclick="imgcontro.selectFile('file','bin/upload.php','',function(data){game.uploaded(data)})"><img src="res/img/btn-upload.png"></a>
so easy,现在贴出来代码
var imgcontro = { selectFile:function(imgname,action,params,callback){ var rand = parseInt(Math.random()*10000000000000), paramArr = params != "" ? params.split(","):[]; $("form[id^='tmpForm_']").remove(); $("body").append( '<form id="tmpForm_'+ rand +'" enctype="multipart/form-data" method="post" action="'+ action +'" target="tmpIframe_'+rand+'">'+ '<input type="file" name="'+ imgname +'" style="display:none" onchange="imgcontro.upload(this,'+ rand +','+ callback +');">'+ '<iframe style="display:none;" name="tmpIframe_'+ rand +'" id="tmpIframe_'+ rand +'"></iframe>'+ '</form>' ); var from = $("#tmpForm_"+rand),file = from.find('input[type="file"]'); if(paramArr.length>0){ for(var i = 0;i<paramArr.length;i++){ var thisKey = paramArr[i].split(":")[0].split("{")[1], thisValue = paramArr[i].split(":")[1].split("}")[0]; from.append('<input type="hidden" name="'+ thisKey +'" value="'+ thisValue +'">'); } } file.click(); }, upload:function(obj,randcode,callBack){ var object = $(obj),form = object.parent(), iframe = document.getElementById("tmpIframe_"+ randcode), getResStr,w_timer,jsonData,filepath = object.val(), extStart = filepath.lastIndexOf("."), ext = filepath.substring(extStart,filepath.length).toUpperCase(); if(filepath == "" || filepath == null){ alert("请先选择一张图片"); return false; } if(ext!=".JPG"&&ext!=".JPEG"&&ext!=".GIF"&&ext!=".BMP"&&ext!=".PNG"){ alert("仅限于上传 jpeg,jpg,png,bmp,gif 格式的文件"); return false; } form.submit(); loading.s(); if (iframe.attachEvent) { iframe.attachEvent("onload", function() { getResStr = document.frames[iframe.id].document.body.innerHTML; }); w_timer = setInterval(function(){ if(getResStr != ""){ clearInterval(w_timer); loading.h(); callBack(getResStr); } },50); } else { iframe.onload = function() { getResStr = iframe.contentDocument.body.innerHTML; loading.h(); callBack(getResStr); }; } } };
当然,为了体验更加友好,上传中的时候加个遮罩层和菊花,看起来不会以为是死机了,菊花代码在这,兼容手机端(jquery下,zepto暂时没解决兼容性问题)
var loading = { s:function(){ $("#loading").show(); $("#loading").animate({opacity:1}, 300) }, h:function(){ setTimeout(function(){ $("#loading").animate({opacity:0}, 500,'',function(){$("#loading").hide();}) },200); } }好了,下班回家了,做个笔记
本文链接:https://www.92ez.com/?action=show&id=23376
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。