上传图片js判断图片尺寸和格式兼容IE
作者:bea
js代码: $(".head").change(function() {var val = $(this).val();if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ imgtype = false;alert('图片格式无效!'); }else{if (FileReader) {var reader = new FileReader(),file = this.files[0];reader.onload = function(e)
js代码:
$(".head").change(function() {
var val = $(this).val();
if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){
imgtype = false;
alert('图片格式无效!');
}else{
if (FileReader) {
var reader = new FileReader(),
file = this.files[0];
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload=function(){
if(image.width > 128 || image.height > 128){
fill = false;
alert("头像尺寸应在128x128之间");
}
}
};
reader.readAsDataURL(file);
}else{
//这是ie9版本
$(".preview_size_fake").show();
var objPreviewSizeFake = $(".preview_size_fake").get(0);
var fileupload = $(this).get(0);
fileupload.select();
fileupload.blur();
path = document.selection.createRange().text;
if (/"wW"/.test(path)) {
path = path.slice(1,-1);
}
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path;
if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){
fill = false;
alert("头像尺寸应在128x128之间");
}
document.selection.empty();
}
}
});
css代码(这个是必须写的,如果不写,ie下不起作用)
.preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
height: 1px;
visibility:hidden;
overflow: hidden;
display: none;
}
html代码:
<input class="head" type="file" name="avatar">
<img class="preview_size_fake" />
有用 | 无用
$(".head").change(function() {
var val = $(this).val();
if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){
imgtype = false;
alert('图片格式无效!');
}else{
if (FileReader) {
var reader = new FileReader(),
file = this.files[0];
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload=function(){
if(image.width > 128 || image.height > 128){
fill = false;
alert("头像尺寸应在128x128之间");
}
}
};
reader.readAsDataURL(file);
}else{
//这是ie9版本
$(".preview_size_fake").show();
var objPreviewSizeFake = $(".preview_size_fake").get(0);
var fileupload = $(this).get(0);
fileupload.select();
fileupload.blur();
path = document.selection.createRange().text;
if (/"wW"/.test(path)) {
path = path.slice(1,-1);
}
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path;
if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){
fill = false;
alert("头像尺寸应在128x128之间");
}
document.selection.empty();
}
}
});
css代码(这个是必须写的,如果不写,ie下不起作用)
.preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
height: 1px;
visibility:hidden;
overflow: hidden;
display: none;
}
html代码:
<input class="head" type="file" name="avatar">
<img class="preview_size_fake" />
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 使用jquery实现放大镜效果
- javascript初学者常用技巧
- js/jquery判断浏览器的方法小结
- Iframe实现跨浏览器自适应高度解决方法
- jQuery级联操作绑定事件实例
- jquery和css3实现的炫酷时尚的菜单导航
- Enter回车切换输入焦点实现思路与代码兼容各大浏览器
- jQuery淡入淡出元素让其效果更为生动
- JQuery表格拖动调整列宽效果(自己动手写的)
- JQuery中的html()、text()、val()区别示例介绍
- 关闭页面window.location事件未执行的原因及解决方法
- 文本框倒叙输入让输入框的焦点始终在最开始的位置
- JavaScript中的单引号和双引号报错的解决方法
- 一个简单的动态加载js和css的jquery代码
- jquery ajax请求方式与提示用户正在处理请稍等
- 用js提交表单解决一个页面有多个提交按钮的问题
- 浅析JQuery中的html(),text(),val()区别
- 如何判断微信内置浏览器(通过User Agent实现)
- 使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证