表单中的file上传控件在各个浏览器中的外观都不太一样,所以我们可以自己做一个外观。原理是隐藏file控件,然后自己做出文件名的显示区域,以及选择按钮。
<form id="form0"> <input type="file" id="fileinput1"> <span id="showfile">尚未选择文件</span> <span title="选择文件" id="selectbtn1">选择文件</span> <span class="tip">图片必须为jpg格式,体积小于2M,文件名不能包含“sox”三个字</span> </form> <style> #fileinput1{display: none;} #form0 span{border-radius: 5px;font-family: '微软雅黑';display: inline-block;} #showfile{width: 300px;height: 34px;line-height: 34px;color: #aaa;padding:0 5px 0 10px;border:1px solid #0c0;white-space:nowrap; text-overflow:ellipsis;overflow: hidden;vertical-align:top;} #selectbtn1{width: 100px;height: 36px;line-height: 36px;background:#4DB849;color: #fff;text-align: center;cursor: pointer;vertical-align:top;} .tip{margin-left: 5px;color: #aaa;height: 36px;line-height: 44px;} </style> <script> document.getElementById("selectbtn1").onclick=function () { document.getElementById("fileinput1").click(); } document.getElementById("fileinput1").onchange=function(){ if (this.files[0].type!="image/jpeg") { alert("文件格式不正确!"); return false; }else if(this.files[0].size>2000000){ alert("文件体积过大!"); return false; }else if (this.files[0].name.toLowerCase().indexOf("sox")>-1) { alert("文件名包含非法字符!"); return false; }; document.getElementById("showfile").innerHTML=this.files[0].name;//这里没有用value,因为获取不到真实的绝对路径的,不如只显示文件名 document.getElementById("showfile").style.color="#333"; } </script>
点击选择文件按钮的时候用js去触发file控件;在选取文件之后,将文件信息显示到文件名区域里。
你可能会注意到files[]这个集合:
this.files[0]
这是html5中为file控件增加的属性,通用的有name、size、type、lastModified这几个属性。这些属性可以用来对上传的文件做一些检测。
注意,size的单位是Byte(字节)。
修改表单中file控件的外观
以前用的法杖外观是商城的猫爪外观,经过别人提醒,说是63史诗法杖的外观更漂亮。后来我上线看到别人的63法杖外观了,确实很炫,于是我也2E收了一把,做了这个外形变更。
63ss法杖比65浅蓝的漂亮,在颜色上银色、黑色、红色颜色分明,更有质感。高强之后武器首尾两端的红色部分会像呼吸灯一样变换亮度,真是酷炫。
Read More →
第九大陆63史诗法杖外观
这套时装是萨满的新手礼包里面送的,使用期限是7天。虽然并不算很漂亮,不过也还可以看。国服商城里的时装大多数都惨不忍睹。
雪山里的截图,背景、光线都很好的,只是我这个角色的脸不好看。所以后面戴上了头套,看不见正好~哈哈
Read More →
第九大陆萨满新手时装截图
我的元素换服装的时候都会截图记录,时装的图另外开坑。截图的时候游戏里不是白天,效果不完美(论高光的重要性)。
这是17级的时候,新手阶段
Read More →
第九大陆萨满服装外观截图
玲珑是第九大陆目前为止最后出的一个职业,这个职业有个特点,就是服装特漂亮,普通装备的外观都比得上其他职业买的时装的效果了。下面上图来看看。
这是新手服装的外形。截这些图的时候是统一截的,当时游戏环境是黄昏,没有高光,所以效果并不完美。
Read More →
第九大陆玲珑服装截图
我这个镰刀没满级的时候买了套比基尼时装,从那以后一直没脱,也就没看到普通装备的外观是什么样的。今天想把比基尼给小号穿上,这才脱下时装,结果发现了我遗失的美好,这套防具的外观完爆大部分时装啊。
Read More →
第九大陆萨满65级防具外观截图
昨晚世界上有人喊800W卖的,感觉很便宜就买了,交易之后带上,第一时间的感觉就是囧...
Read More →