圖片批量上傳js+html+css

VEIGHTZ 發(fā)布于2019-08-02 15:16 / 1435人閱讀

摘要：上傳成功后可以進行業(yè)務的下一步操作，自己根據(jù)業(yè)務寫吧后臺代碼接收前端的文件數(shù)據(jù)添加圖例開始添加圖例結(jié)束該圖例名稱已經(jīng)存在高級基本自定義添加成功添加失敗再往后和數(shù)據(jù)庫的交互我就不寫了小菜一枚，不正確之處請批評指正

如題，圖片批量上傳，效果如圖所示

上代碼
HTML




    
     
    
    jquery多文件上傳插件
    
    
    
    
    
    


    
    
        
            jquery多文件上傳插件效果演示
        
        
            
                
                    請選擇文件

jquery.imageuploader.js

/*
 * ??2016 Quicken Loans Inc. All rights reserved.
 */
/* global jQuery FormData FileReader */
(function ($) {
    $.fn.uploader = function (options, testMode) {
        return this.each(function (index) {
            options = $.extend({
                submitButtonCopy: "上傳選定的文件",
                instructionsCopy: "支持拖放",
                furtherInstructionsCopy: "你也可以刪除文件",
                selectButtonCopy: "選擇文件",
                secondarySelectButtonCopy: "選擇多個文件",
                dropZone: $(this),
                fileTypeWhiteList: ["jpg", "png", "jpeg", "gif", "pdf"],
                badFileTypeMessage: "對不起，我們不能接受這種類型的文件。",
                ajaxUrl: "/images/add",
                testMode: false
            }, options);

            var state = {
                fileBatch: [],
                isUploading: false,
                isOverLimit: false,
                listIndex: 0
            };

            // create DOM elements
            var dom = {
                uploaderBox: $(this),
                submitButton: $(""),
                instructions: $("" +
                    options.instructionsCopy + ""),
                selectButton: $("" +
                    "" +
                    options.selectButtonCopy + ""),
                secondarySelectButton: $("" +
                    "" +
                    options.secondarySelectButtonCopy + ""),
                fileList: $(""),
                contentsContainer: $(""),
                furtherInstructions: $("" + options.furtherInstructionsCopy + "")
            };

            // empty out whatever is in there
            dom.uploaderBox.empty();

            // create and attach UI elements
            setupDOM(dom);

            // set up event handling
            bindUIEvents();

            function setupDOM (dom) {
                dom.contentsContainer
                    .append(dom.instructions)
                    .append(dom.selectButton);
                dom.furtherInstructions
                    .append(dom.secondarySelectButton);
                dom.uploaderBox
                    .append(dom.fileList)
                    .append(dom.contentsContainer)
                    .append(dom.submitButton)
                    .after(dom.furtherInstructions);
            }

            function bindUIEvents () {
                // handle drag and drop
                options.dropZone.on("dragover dragleave", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
                $.event.props.push("dataTransfer"); // jquery bug hack
                options.dropZone.on("drop", selectFilesHandler);

                // hack for being able selecting the same file name twice
                dom.selectButton.on("click", function () { this.value = null; });
                dom.selectButton.on("change", selectFilesHandler);
                dom.secondarySelectButton.on("click", function () { this.value = null; });
                dom.secondarySelectButton.on("change", selectFilesHandler);

                // handle the submit click
                dom.submitButton.on("click", uploadSubmitHandler);

                // remove link handler
                dom.uploaderBox.on("click", ".js-upload-remove-button", removeItemHandler);

                // expose handlers for testing
                if (options.testMode) {
                    options.dropZone.on("uploaderTestEvent", function (e) {
                        switch (e.functionName) {
                        case "selectFilesHandler":
                            selectFilesHandler(e);
                            break;
                        case "uploadSubmitHandler":
                            uploadSubmitHandler(e);
                            break;
                        default:
                            break;
                        }
                    });
                }
            }

            function addItem (file) {
                //var fileName = cleanName(file.name);
                var fileName = file.name;
                var fileSize = file.size;
                var id = state.listIndex;
                var sizeWrapper;
                var fileNameWrapper = $("" + fileName + "");

                state.listIndex++;

                var listItem = $("");
                var thumbnailContainer = $("");
                var thumbnail = $("");
                var removeLink = $("");
                // validate the file
                if (options.fileTypeWhiteList.indexOf(getExtension(file.name).toLowerCase()) !== -1) {
                    // file is ok, add it to the batch
                    state.fileBatch.push({file: file, id: id, fileName: fileName, fileSize: fileSize, groups:groups});
                    sizeWrapper = $("" + formatBytes(fileSize) + "");
                } else {
                    // file is not ok, only add it to the dom
                    sizeWrapper = $("" + options.badFileTypeMessage + "");
                }

                // create the thumbnail, if you can
                if (window.FileReader && file.type.indexOf("image") !== -1) {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        thumbnail.attr("src", reader.result);
                        thumbnail.parent().find("i").remove();
                    };
                    reader.onerror = function () {
                        thumbnail.remove();
                    };
                    reader.readAsDataURL(file);
                } else if (file.type.indexOf("image") === -1) {
                    thumbnail = $("");
                }

                thumbnailContainer.append(thumbnail);
                listItem.append(thumbnailContainer);

                listItem
                    .append(fileNameWrapper)
                    .append(sizeWrapper)
                    .append(removeLink);

                dom.fileList.append(listItem);
            }

            function getExtension (path) {
                var basename = path.split(/[/]/).pop();
                var pos = basename.lastIndexOf(".");

                if (basename === "" || pos < 1) {
                    return "";
                }
                return basename.slice(pos + 1);
            }

            function formatBytes (bytes, decimals) {
                if (bytes === 0) return "0 Bytes";
                var k = 1024;
                var dm = decimals + 1 || 3;
                var sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
                var i = Math.floor(Math.log(bytes) / Math.log(k));
                return (bytes / Math.pow(k, i)).toPrecision(dm) + " " + sizes[i];
            }

            function cleanName (name) {
                name = name.replace(/s+/gi, "-"); // Replace white space with dash
                return name.replace(/[^a-zA-Z0-9.-]/gi, ""); // Strip any special characters
            }

            function uploadSubmitHandler () {
                if (state.fileBatch.length !== 0) {
                    var groups = $("#groups option:selected").val();
                    var data = new FormData();
                    for (var i = 0; i < state.fileBatch.length; i++) {
                        //data.append("files[]", state.fileBatch[i].file, groups+state.fileBatch[i].fileName);
                        data.append("files[]", state.fileBatch[i].file);
                    }
                    data.append("group", groups);
                    $.ajax({
                        type: "POST",
                        url: options.ajaxUrl,
                        data:data,
                        cache: false,
                        contentType: false,
                        /*enctype: "multipart/form-data",*/
                        processData: false,
                        success : function(result) {
                            //上傳成功后可以進行業(yè)務的下一步操作，自己根據(jù)業(yè)務寫吧
                        }
                    });
                }
            }

            function selectFilesHandler (e) {
                e.preventDefault();
                e.stopPropagation();

                if (!state.isUploading) {
                    // files come from the input or a drop
                    var files = e.target.files || e.dataTransfer.files || e.dataTransfer.getData;

                    // process each incoming file
                    for (var i = 0; i < files.length; i++) {
                        addItem(files[i]);
                    }
                }
                renderControls();
            }

            function renderControls () {
                if (dom.fileList.children().size() !== 0) {
                    dom.submitButton.removeClass("uploader__hide");
                    dom.furtherInstructions.removeClass("uploader__hide");
                    dom.contentsContainer.addClass("uploader__hide");
                } else {
                    dom.submitButton.addClass("uploader__hide");
                    dom.furtherInstructions.addClass("uploader__hide");
                    dom.contentsContainer.removeClass("uploader__hide");
                }
            }

            function removeItemHandler (e) {
                e.preventDefault();

                if (!state.isUploading) {
                    var removeIndex = $(e.target).data("index");
                    removeItem(removeIndex);
                    $(e.target).parent().remove();
                }

                renderControls();
            }

            function removeItem (id) {
                // remove from the batch
                for (var i = 0; i < state.fileBatch.length; i++) {
                    if (state.fileBatch[i].id === parseInt(id)) {
                        state.fileBatch.splice(i, 1);
                        break;
                    }
                }
                // remove from the DOM
                dom.fileList.find("li[data-index="" + id + ""]").remove();
            }
        });
    };
}(jQuery));

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片批量上傳js+html+css

jquery多文件上傳插件效果演示

相關(guān)文章

圖片批量上傳js+html+css

圖片批量上傳js+html+css

Bootstrap FileInput(文件上傳)中文API整理

發(fā)表評論

0條評論

VEIGHTZ

男|高級講師

TA的文章

高度不固定時垂直居中

PHP后臺核心框架、自定義擴展功能直接上手做功能開發(fā)即可

第十一集: 從零開始實現(xiàn)一套pc端vue的ui組件庫( tab切換組件 )

如何手寫call、apply、bind？

JavaScript 中 Object.defineProperty 的用法

開發(fā)第一個VUE插件

JS學習（錯誤與異常）

2018年螞蟻金服前端一面總結(jié)（面向2019屆學生）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片批量上傳js+html+css

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！