首頁 > 文章 > web前端 > 圖片批次上傳js外掛程式 imgFileupload.js

圖片批次上傳js外掛程式 imgFileupload.js

angryTom轉載: 2019-11-30 15:01:283065瀏覽

外掛程式Demo展示

外掛程式功能介紹

1、批次選擇圖片，限制圖片的類型(透過限制file的accept)，只能選擇圖片

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

2、可以自訂限制選擇圖片的數量，預設5張

3、可以自訂限制圖片的最大寬度和最大高度，預設都是10000px

4、可以自訂限制圖片的單一檔案大小，預設是4MB

5、使用簡單引用css和js ，並且在頁面加上標籤

即可使用

【相關課程推薦：JavaScript影片教學】

#程式碼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>

多次選擇文件的情況，File元素中的filedata內容總是目前選擇的文件，上一次選擇的文件則被替換掉

並且由於瀏覽器安全性問題,JavaScript無法操作File檔案上傳中的filedata中的文件，無法把多次選擇的文件賦值到File元素的filedata中，因此造成無法直接用form表單直接提交File元素中的檔案

所以這裡我們使用formData來提交檔案和參數，沒有使用form表單提交

本文來自js教學欄目，歡迎學習！

以上是圖片批次上傳js外掛程式 imgFileupload.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：純js實作3d相簿（附源碼）下一篇：純js實作3d相簿（附源碼）

看更多