轻量级图片批量上传JS插件 imgFileupload.js

版权声明:本文为博主原创文章,未经博主允许不得转载。转载请在文章结尾显眼处附带博主文章地址。 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="">

点击下面文件跳转到下载链接

demo下载

你有困难我帮忙,我住隔壁我姓王。----------------- 你隔壁的老王宣。

猜你喜欢

转载自blog.csdn.net/qq_27559331/article/details/81913108
今日推荐