99cj_org-->WebRoot-->cdn-->static-->js-->org-->base-->base_info-->show.js
首先是jsp中的<div>
<div class="form-group">
<label class="form-label">机构logo:</label>
<div class="form-input">
<div class="input-img-upload img-company-logo"><span>机构 LOGO</span>
<div class="inner"><img id ="org_logo_img" src="" onerror="javascript:this.src='<%=R.getStaticPath("images/user-header.png")%>';" alt=""></div>
<div class="btn-uploadfile" id="logo_img_div"><span>
上传图片</span>
<input name="u_head_url" ref="head_url" id="logo_img_upload" type="file" accept="image/*"/>
<input name="u_head_url_img" id="u_head_url_img" type="hidden">
</div>
</div>
<div class="help-tip">
<div class="tip">
封面要求:<br/>
1. 建议最佳尺寸:200 x 80 px <br/>
2. 上传文件大小不能超过 1 MB <br/>
3. 支持 jpg、png、gif 格式<br/><span>推荐使用透明背景的png格式</span>
</div>
</div>
</div>
</div>
<input>的type="file"可以直接选取文件,accept属性是限制文件的格式
function checkImg(this_){
var filepath = this_.val();
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG") {
YY.ui.alert("图片限于png,gif,jpeg格式");
return false;
}
var file_size = 0;
if (/msie/.test(navigator.userAgent.toLowerCase())) {
var img = new Image();
img.src = filepath;
while (true) {
if (img.fileSize > 0) {
if (img.fileSize > 1 * 1024) {
YY.ui.alert("上传的图片大小不能超过1M!");
return false;
}
break;
}
}
} else {
file_size = this_[0].files[0].size;
var size = file_size / 1024;
if (size > 1024) {
YY.ui.alert("上传的图片大小不能超过1M!");
return false;
}
}
return true;
}
参数“this_”是jsp内的节点 var tip = $("#logo_img_upload");
判断格式:
获取的this_.val()为选择的文件的路径,用string处理后通过其拓展名就可以判断出此文件属于什么类型的文件。
判断文件大小:
/msie/.test(navigator.userAgent.toLowerCase())
以上代码为jquery1.9后更新的内容,用来判断浏览器类型,具体判断方式问百度;以上的判断是用来判断是否为IE浏览器,具体是否生效没有用IE测(微软自己都放弃IE了),这里主要分解非IE浏览器的处理方式:
file_size = this_[0].files[0].size;
var size = file_size / 1024;
if (size > 1024) {
YY.ui.alert("上传的图片大小不能超过1M!");
return false;
}
file_size获取的值便是当前文件的大小,单位是KB,所以后面要/1024,将单位转化为M后进行比较。
主要需要注意的是this_[0].files[0].size的写法,jquery获取的节点对象其实是将getElementById()获取的节点对象进行封装后的结果,而jquery对象默认是一个数组,所以定位后需要加索引号。具体内容请参照以下博客:
http://blog.sina.com.cn/s/blog_6edf16820102vhox.html
按照this_[0].files[0].size的写法,当type="file"的时候,获取的files默认也被封装成为了数组,所以也需要加入索引号。
同时,this_[0]为原生对象,也就是说,files[0].size这个属性是javascript原生对象的属性,并不属于jquery的方法。