jQuery限制上传图片格式和大小代码实例
分类：实例代码
通常情况下网站对上传的图片格式和大小都会有所限制。
下面就分享一段能够实现此功能代码，感兴趣的朋友可以做一下参考。
代码中缺乏图片，不过不影响核心功能。
特别说明:仅仅做前端验证是不够的，通常情况下，后台也会进行同样的验证。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.form-group {
width: 100%;
margin-bottom: 20px;
height: auto;
}
.va-top {
vertical-align: top;
display: inline-block;
}
.input-w {
width: 500px;
}
.img-left {
padding-right: 16px;
width: 65%;
border-right: 1px dashed #cccccc;
}
.img-left a, .item_img {
width: 120px;
height: 120px;
text-align: center;
display: inline-block;
margin-right: 50px;
vertical-align: top;
}
.a_first + .item_img {
margin-right: 0px;
}
.item_img img {
width: 120px;
height: 120px;
}
.img-left .a_last, .img-left .a_first {
padding-top: 85px;
background-image: url("../img/addPic.png");
background-repeat: no-repeat;
background-position: center center;
}
.img-left .a_last {
margin-right: 0;
}
.img-left .format-tip {
margin-top: 20px;
}
.img-right {
padding-left: 30px;
width: 34%;
}
.img-right span {
text-align: center;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body>
<div class="form-group file_group">
<label class="va-top">照片</label>
<div class="input-w va-top">
<div class="img-left va-top">
<a class="a_first" id="firstBtn">添加正面照片</a>
<a class="a_last" id="lastBtn">添加反面照片</a>
<p class="format-tip">请上传身份证正面和反面照片，要求能看清证件号码，格式要求：支持jpg/jepg/png,大小不超过4W</p>
</div>
<div class="img-right va-top">
<p>参考示例</p>
<img src="../img/img0.jpg" alt="照片的正反两面">
</div>
</div>
<input type="file" id="firstFile">
<input type="file" id="lastFile">
<span></span>
</div>
<script src="/wp-content/uploads/front-end-tutorial/error.html"></div>';
$(bind_img);
function bind_img() {
var firstBtn = document.getElementById("firstBtn");
var lastBtn = document.getElementById("lastBtn");
var fileFirst = document.getElementById("firstFile");
var fileLast = document.getElementById("lastFile");
bind_change(firstBtn, fileFirst);
bind_change(lastBtn, fileLast);
}
//绑定图片选择的事件
function bind_change(btnObj, fileObj) {
$(btnObj).unbind("click").bind("click", function() {
fileObj.click();
});
$(fileObj).change(function() {
var that = $(this);
//判断图片的类型和大小
judgeTypeSize(btnObj, that, 160, img_upload);
});
}
function judgeTypeSize(btnObj, fileObj, maxSize, callback) {
var value = fileObj.val();
if (!value.match(/.jpg|.jpeg|png/i)) {
alert("图片格式必须是jpg或jpeg或png");
} else {
var size = fileObj[0].files[0].size; //得到图片的大小[]
var span = fileObj.parent().find("span"); //错误的提示span
console.log(size / 1024 + "kb");
var trueSize = Math.ceil(size / 1024); //把字节转换成kb
if (trueSize > maxSize) {
span.show();
span.html("照片尺寸过大，请重新选择");
} else {
span.hide();
if (callback) {
callback(btnObj, fileObj[0]);
}
}
}
}
function getImgUrl(fileObj) {
var url;
if (fileObj.files && fileObj.files[0]) { //火狐下
url = window.URL.createObjectURL(fileObj.files[0]);
} else { ////IE下
fileObj.select();
url = fileObj.selection.createRange().text;
document.selection.empty();
}
return url;
}
//得到图片的地址并进行预览
function img_upload(btnObj, fileObj) {
var url = getImgUrl(fileObj);
var $imgBox = $(imgBox);
var imgLeft = $(".img-left");
var img = $imgBox.find("img");
img.attr("src", url);
imgLeft[0].insertBefore($imgBox[0], btnObj); //js的方法
//$(btnObj).hide();
console.log("成功了");
}
})(jQuery, window);
</script>
</body>
</html>
jQuery限制上传图片格式和大小代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery限制上传图片格式和大小代码实例就介绍到这了。
jQuery限制上传图片格式和大小代码实例属于前端实例代码，有关更多实例代码大家可以查看。