jQuery实现验证上传图片的格式与大小的实例方法
- 发布时间：
- 作者：码农之家
- 点击：171
这篇文章主要知识点是关于jQuery、验证上传图片、格式、大小、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
使用jQuery实现验证上传图片的格式与大小
代码很简单，常见的图片格式均已加入验证之中，小伙伴们可以直接拿去用的。
废话少说，直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form01").change( function(){
var filepath=$("input[name='myFile']").val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
alert("图片限于bmp,png,gif,jpeg,jpg格式");
return false;
}else{$("#name01").text(ext)}
var file_size = 0;
if ( $.browser.msie) {
var img=new Image();
img.src=filepath;
while(true){
if(img.fileSize > 0){
if(img.fileSize>3*1024*1024){
alert("图片不大于100MB。");
}else{
var num03 = img.fileSize/1024;
num04 = num03.toFixed(2)
$(".size02").text(num04+"KB");
}
break;
}
}
} else {
file_size = this.files[0].size;
console.log(file_size/1024/1024 + " MB");
var size = file_size / 1024;
if(size > 10240){
alert("上传的文件大小不能超过10M！");
}else{
var num01 = file_size/1024;
num02 = num01.toFixed(2)
$("#size01").text(num02 + " KB");
}
}
return true;
});
});
</script>
<title>无标题文档</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="72" id="name01"> </td>
<td width="242"><input type="file" name="myFile" id="form01" /></td>
<td width="184" id="size01" class="size02"> </td>
</tr>
</table>
</body>
</html>
以上代码超级简单，小伙伴们使用的时候自己记得美化下，这里就不多做解释了。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
您可能感兴趣的文章:
jQuery图片上传 相关电子书
学习笔记
<
1
>
基于jquery实现图片上传本地预览功能
当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果网速慢或图片有问题，这样不但浪费客户时间同时也浪费服务器资源了，下面我们介绍利用js上传图片时本地实现预览，希望此方法对各位有所帮助哦。 一、原理 分为两步： 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）； 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。 在这里，我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。 1、File对象 File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象. 下面来看获取FileList对象： script type="tex……
jQuery移动端图片上传组件
本文实例为大家分享了移动端图片上传组件，供大家参考，具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片，并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isCompress:true, 如果是图片，可以开启客户端压缩，减少传输的数据文件 compressNum:0.6, 图片的压缩率，0~1 设置为1可能最终结果比未压缩还大，请慎用1. beforeUpload:function(){}, 上传之前的处理，返回false可以阻止文件的上传 uploadStart: function(){}, 开始上传的回调 afterUpload: function(){}, 上传结束的回调 uploadProgress: function(v){} 上传的进度条 uploadError: function(){} 上传错误的回调 showThumbnail:function(){} 显示缩略图 使用范例： div id="proccess"/div压缩……
jQuery实现判断上传图片类型和大小的方法示例
本文实例讲述了jQuery实现判断上传图片类型和大小的方法。分享给大家供大家参考，具体如下： 这里使用jQuery判断上传图片的类型和大小： !DOCTYPE htmlhtmlheadmeta charset="utf-8"/headbodyform action="" method="" input type="file" id="file" //formp id="p_1"图片格式为：/pp id="p_2"图片大小为：/pscript src="js/jquery-1.8.3.min.js"/scriptscript$(function(){ var p_1 = $('#p_1'), p_2 = $('#p_2'); $('body').on('change','#file',function(){ var path = $(this).val(), extStart = path.lastIndexOf('.'), ext = path.substring(extStart,path.length).toUpperCase(); //判断图片格式 if(ext !== '.PNG' ext !== '.JPG' ext !== '.JPEG' ext !== '.GIF'){ alert('请上传正确格式的图片'); resetFile(); return false; }else{ p_1.html('图片格式为：' + ext); } //获取图片大小，注意使用this，而不是$(this) var size = this.files[0].size / 1024; if(size 10240){ alert('图片大小不能超过10M'); resetFile(); return false; }else{……