saber酱的抱枕

生于忧患,死于安乐

09/5
08:00
学习

修改表单中file控件的外观

表单中的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控件的外观

08/31
10:33
游戏

第九大陆63史诗法杖外观

第九大陆 法杖 外观

以前用的法杖外观是商城的猫爪外观,经过别人提醒,说是63史诗法杖的外观更漂亮。后来我上线看到别人的63法杖外观了,确实很炫,于是我也2E收了一把,做了这个外形变更。

63ss法杖比65浅蓝的漂亮,在颜色上银色、黑色、红色颜色分明,更有质感。高强之后武器首尾两端的红色部分会像呼吸灯一样变换亮度,真是酷炫。
Read More →

第九大陆63史诗法杖外观

04/3
00:35
游戏

第九大陆萨满新手时装截图

第九大陆萨满新手时装截图
这套时装是萨满的新手礼包里面送的,使用期限是7天。虽然并不算很漂亮,不过也还可以看。国服商城里的时装大多数都惨不忍睹。
雪山里的截图,背景、光线都很好的,只是我这个角色的脸不好看。所以后面戴上了头套,看不见正好~哈哈
Read More →

第九大陆萨满新手时装截图

04/3
00:04
游戏

第九大陆玲珑服装截图

玲珑是第九大陆目前为止最后出的一个职业,这个职业有个特点,就是服装特漂亮,普通装备的外观都比得上其他职业买的时装的效果了。下面上图来看看。
第九大陆玲珑新手服装截图
这是新手服装的外形。截这些图的时候是统一截的,当时游戏环境是黄昏,没有高光,所以效果并不完美。
Read More →

第九大陆玲珑服装截图