版权声明:本文为博主原创文章,未经博主允许不得转载。转载请在文章结尾显眼处附带博主文章地址。 https://blog.csdn.net/qq_27559331/article/details/81913108
声明:本插件基于作者:半杯~竹叶青的 imgFileupload.js 插件扩展的 链接地址
插件功能
1、批量选择图片,限制限制图片的类型 (通过限制file的accept)
默认:accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
2、可以自定义限制选择图片的数量,默认5张
3、可以自定义限制图片的最大宽度和最大高度,默认都是10000px
4、可以自定义限制图片的单文件大小,默认是4MB
5、使用简单引用css和js ,并且在页面加上标签<div class="review_img"></div> 即可使用
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script src="imgFileupload.js"></script>
<link href="imgFileupload.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="review_img"></div>
</body>
</html>
<script>
var imgFile ;
$(function () {
imgFile = new ImgUploadeFiles('.review_img', function (e) {
this.init({
MAX: 6, //Limit the number of images
FileSize: 1024 * 1024 * 4,//单文件限制4MB(注意:单位KB)
callback: function (arr) {
console.log(arr)
}
});
});
});
</script>
后端接收可以直接找到插件生成的隐藏的file,根据name获取file里面的图片,如果是多张的话,则file里面有多个图片
<input type="file" name="imgFiles" id="imgFiles" class="imgFiles" style="display: none" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" multiple="">
点击下面文件跳转到下载链接
你有困难我帮忙,我住隔壁我姓王。----------------- 你隔壁的老王宣。