Bild-Batch-Upload-JS-Plugin imgFileupload.js-js-Tutorial-php.cn

Bild-Batch-Upload-JS-Plugin imgFileupload.js

angryTom

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

nach vorne

3109 Leute haben es durchsucht

Plug-in-Demo-Anzeige

Bild-Batch-Upload-JS-Plugin imgFileupload.js

Plug-in Funktionseinführung

1. Wählen Sie Bilder stapelweise aus, begrenzen Sie die Art der Bilder (durch Beschränken der Dateiannahme), es können nur Bilder ausgewählt werden

Standard: Accept="image/ gif,image/jpeg,image/ jpg, image/png, image/svg"

2. Sie können die Begrenzung der Anzahl ausgewählter Bilder anpassen, der Standardwert ist 5

3. Sie können die maximale Breite und Höhe des Bildes anpassen. Der Standardwert beträgt 10000 Pixel 🎜>5. Verwenden Sie einfache Verweise auf CSS und JS und fügen Sie sie dem Seiten-Tag

hinzu, um

[Related Kursempfehlungen:

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>

Nach dem Login kopieren

Wenn eine Datei mehrmals ausgewählt wird, wird der Dateidateninhalt im Dateielement angezeigt immer die aktuell ausgewählte Datei, und die zuletzt ausgewählte Datei wird ersetzt

Und aufgrund von Browser-Sicherheitsproblemen kann JavaScript die Dateien in den Dateidaten beim Hochladen von Dateien nicht verarbeiten. Es ist nicht möglich, den Dateidaten von mehrere ausgewählte Dateien zuzuordnen Daher ist es unmöglich, das Dateielement direkt über das Formular „Dateien“ in zu übermitteln. Daher verwenden wir hier formData, um Dateien und Parameter ohne Verwendung des Formulars „Formularübermittlung“ zu übermitteln >Dieser Artikel stammt aus der Rubrik

JS-Tutorial

, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonBild-Batch-Upload-JS-Plugin imgFileupload.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!