Plug-in js de téléchargement par lots d'images imgFileupload.js-js tutoriel-php.cn

Plug-in js de téléchargement par lots d'images imgFileupload.js

angryTom

Libérer： 2019-11-30 15:01:28

avant

3110 Les gens l'ont consulté

Affichage de démonstration du plug-in

Plug-in js de téléchargement par lots dimages imgFileupload.js

Plug-in introduction de la fonction

1. Sélectionnez les images par lots et limitez le type d'images (en limitant l'acceptation du fichier. Seules les images peuvent être sélectionnées

Par défaut : accept="image/). gif,image/jpeg,image/ jpg,image/png,image/svg"

2. Vous pouvez personnaliser la limite du nombre d'images sélectionnées, la valeur par défaut est 5

3. Vous pouvez personnaliser la largeur et la hauteur maximales de l'image, la valeur par défaut est de 10 000 px

4. Vous pouvez personnaliser la taille du fichier unique de l'image, la valeur par défaut est de 4 Mo

5. Utilisez des références simples aux CSS et js, et ajoutez-les à la page Tag

à utiliser [Cours connexe recommandations :

Tutoriel vidéo JavaScript]

Démo de code

<!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>

Copier après la connexion

Lorsqu'un fichier est sélectionné plusieurs fois, le contenu des données de fichier dans l'élément File est toujours le fichier actuellement sélectionné et le dernier fichier sélectionné est remplacé

Et en raison de problèmes de sécurité du navigateur, JavaScript ne peut pas exploiter les fichiers dans les données de fichier lors du téléchargement du fichier. Il ne peut pas attribuer plusieurs fichiers sélectionnés aux données de fichier du fichier. Élément File. Par conséquent, il est impossible de soumettre directement l'élément File à l'aide du formulaire de formulaire. Fichiers dans

Nous utilisons donc ici formData pour soumettre des fichiers et des paramètres sans utiliser la soumission de formulaire

. Cet article provient de la rubrique

tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!