Image batch upload js plug-in imgFileupload.js-JS Tutorial-php.cn

Image batch upload js plug-in imgFileupload.js

angryTom

Release： 2019-11-30 15:01:28

forward

3061 people have browsed it

Plug-in Demo display

Image batch upload js plug-in imgFileupload.js

Plug-in function introduction

1. Select pictures in batches and limit the type of pictures (by limiting the accept of file). Only pictures can be selected.

Default: accept="image/gif,image/jpeg,image/ jpg,image/png,image/svg"

2. You can customize the limit on the number of selected pictures. The default is 5

3. You can customize the maximum width and height of the picture. The default is 10000px

4. You can customize the single file size limit of the image. The default is 4MB

5. Use simple references to css and js, and add it to the page. Tag

to use

[Related course recommendations: JavaScript video tutorial]

Code Demo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>轻量级图片批量上传JS插件imgFileupload</title>
<meta charset="utf-8" />
    <link href="Content/css/imgFileupload.css" rel="stylesheet" />
    <script src="Content/js/jquery-1.8.3.min.js"></script>
    <script src="Content/js/imgFileupload.js"></script>    
</head>
<body>
    <!--这里加载上传图片插件-->
    <div class="review_img">
    </div>
    <input id="parameter1" type="text" value="" /><br />
    <input id="parameter2" type="text" value="" /><br />
    <input id="parameter3" type="text" value="" /><br />
    <input id="parameter4" type="text" value="" /><br />
    <input id="parameter5" type="text" value="" /><br />
    <input type="button" id="sub" value="提交" οnclick="submit()">
</body>
</html>
<script type="text/javascript">
        var imgFile;
        $(function () {
            imgFile = new ImgUploadeFiles(&#39;.review_img&#39;, function (e) {
                this.init({
                    MAX: 6, //Limit the number of images
                    FileSize: 1024 * 1024 * 4,//单文件限制4MB(注意：单位KB)
                    callback: function (arr) {
                        console.log(arr)
                    }
                });
            });
        });
        function submit()
        {            
            var formData = new FormData();
            $(".review_img li").each(function (i, item) {
                formData.append("file", $(item).data("file"));
            });
            formData.append("parameter1", $("#parameter1").val());
            formData.append("parameter2", $("#parameter2").val());
            formData.append("parameter3", $("#parameter3").val());
            formData.append("parameter4", $("#parameter4").val());
            formData.append("parameter5", $("#parameter5").val());
            $.ajax({
                url: "/Index/Write",
                type: "POST",
                dataType: "json",
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {                   
                },
                success: function (data) {
                    alert("ok");
                },
                error: function () {                  
                    alert("Sorry");
                }
            });
        }
</script>

Copy after login

When a file is selected multiple times, the filedata content in the File element is always the currently selected file, and the last selected file is replaced

And due to browser security issues, JavaScript cannot operate the files in the filedata in the File file upload, and cannot assign multiple selected files to the filedata of the File element. As a result, the File element cannot be directly submitted using the form form. Files in

So here we use formData to submit files and parameters, and do not use form form submission

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Image batch upload js plug-in imgFileupload.js. For more information, please follow other related articles on the PHP Chinese website!