图片批量上传js+html+css

如题,图片批量上传,结果如图所示
《图片批量上传js+html+css》

《图片批量上传js+html+css》
上代码
HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery多文件上传插件</title>
    
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    
    <link href="dist/styles.imageuploader.css" rel="stylesheet" type="text/css">
    
</head>
<body>
    
    <section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px;">
        <header class="site-header">
            <h1 class="site-title l-site-title" style="font-size:1.2em;">jquery多文件上传插件结果演示</h1>
        </header>
        <div class="uploader__box js-uploader__box l-center-box">
            <form action="#" method="POST">
                <div class="uploader__contents">
                    <label class="button button--secondary" for="fileinput">请挑选文件</label>
                    <input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
                </div>
                <input class="button button--big-bottom" type="submit" value="Upload Selected Files">
            </form>
        </div>
    </section>
    
    
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="dist/jquery.imageuploader.js" type="text/javascript"></script>
    <script type="text/javascript">
    (function(){
        var options = {};
        $('.js-uploader__box').uploader({
            'selectButtonCopy':'请挑选或拖拽文件',
            'instructionsCopy':'你能够挑选或拖拽多个文件',
            'submitButtonCopy':'上传挑选的文件',
            'furtherInstructionsCopy':'你能够挑选或拖拽更多的文件',
            'secondarySelectButtonCopy':'挑选更多的文件',
        });
    }());
    </script>
    
</body>
</html>

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: $('<button class="js-uploader__submit-button uploader__submit-button uploader__hide">' +
                    options.submitButtonCopy + '<i class="js-uploader__icon fa fa-upload uploader__icon"></i></button>'),
                instructions: $('<p class="js-uploader__instructions uploader__instructions">' +
                    options.instructionsCopy + '</p>'),
                selectButton: $('<input style="height: 0; width: 0;" id="fileinput' + index + '" type="file" multiple class="js-uploader__file-input uploader__file-input">' +
                    '<label for="fileinput' + index + '" style="cursor: pointer;" class="js-uploader__file-label uploader__file-label">' +
                    options.selectButtonCopy + '</label>'),
                secondarySelectButton: $('<input style="height: 0; width: 0;" id="secondaryfileinput' + index + '" type="file"' +
                    ' multiple class="js-uploader__file-input uploader__file-input">' +
                    '<label for="secondaryfileinput' + index + '" style="cursor: pointer;" class="js-uploader__file-label uploader__file-label uploader__file-label--secondary">' +
                    options.secondarySelectButtonCopy + '</label>'),
                fileList: $('<ul class="js-uploader__file-list uploader__file-list"></ul>'),
                contentsContainer: $('<div class="js-uploader__contents uploader__contents"></div>'),
                furtherInstructions: $('<p class="js-uploader__further-instructions uploader__further-instructions uploader__hide">' + options.furtherInstructionsCopy + '</p>')
            };

            // 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 = $('<span class="uploader__file-list__text">' + fileName + '</span>');

                state.listIndex++;

                var listItem = $('<li class="uploader__file-list__item" data-index="' + id + '"></li>');
                var thumbnailContainer = $('<span class="uploader__file-list__thumbnail"></span>');
                var thumbnail = $('<img class="thumbnail"><i class="fa fa-spinner fa-spin uploader__icon--spinner"></i>');
                var removeLink = $('<span class="uploader__file-list__button"><button class="uploader__icon-button js-upload-remove-button fa fa-times" data-index="' + id + '"></button></span>');
                // 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 = $('<span class="uploader__file-list__size">' + formatBytes(fileSize) + '</span>');
                } else {
                    // file is not ok, only add it to the dom
                    sizeWrapper = $('<span class="uploader__file-list__size"><span class="uploader__error">' + options.badFileTypeMessage + '</span></span>');
                }

                // 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 = $('<i class="fa fa-file-o uploader__icon">');
                }

                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) {
                            //上传胜利后能够举行营业的下一步操纵,本身依据营业写吧
                        }
                    });
                }
            }

            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));

css
styles.imageuploader.css

@charset "UTF-8";
/*!
 * ©2016 Quicken Loans Inc. All rights reserved.
 */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr

{ border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } .button, .uploader__file-label, .uploader__submit-button { background-color: white; background-color: transparent; border: 2px solid #ff8598; border-radius: 5px; color: #ff8598; display: block; font-size: 0.8em; padding: 1em 2em; max-width: 15em; text-transform: uppercase; transition: background-color 0.2s; } .button:hover, .uploader__file-label:hover, .uploader__submit-button:hover, .button:active, .uploader__file-label:active, .uploader__submit-button:active, .button:focus, .uploader__file-label:focus, .uploader__file-input:focus + .uploader__file-label, .uploader__submit-button:focus { background-color: #ff8598; color: white; } .button--secondary { color: #ff8598; border-color: #ff8598; padding: 0.5em 1em; max-width: 15em; } .button--secondary:hover, .button--secondary:active, .button--secondary:focus, .uploader__file-input:focus + .uploader__file-label { background-color: #ff8598; color: white; } .button--inline { display: inline-block; } .button--big-bottom, .uploader__submit-button { max-width: none; width: 100%; text-align: center; border-radius: 0; background-color: #ff8598; color: white; } .button--big-bottom:hover, .uploader__submit-button:hover, .button--big-bottom:active, .uploader__submit-button:active, .button--big-bottom:focus, .uploader__submit-button:focus { background-color: #ffb8c3; } .icon-button, .uploader__icon-button { background: transparent; border: 0; color: #d2d2d2; } .icon-button:hover, .uploader__icon-button:hover { color: #424242; } * { box-sizing: border-box; } body { background-color: #e6e6e6; } .site-header::after { content: ''; clear: both; display: table; } .uploader__file-input { height: 0.1px; opacity: 0; overflow: hidden; position: absolute; width: 0.1px; z-index: -1; } .hide, .uploader__hide { display: none; } .show { display: block; } .error, .uploader__error { color: #ff3264; } .file-list, .uploader__file-list { list-style-type: none; width: 100%; padding: 0; margin: 0; } .file-list__item, .uploader__file-list__item { display: table; padding: 0.5em; width: 100%; } .file-list__item:nth-child(2n), .uploader__file-list__item:nth-child(2n) { background-color: #fff5f7; } .file-list__thumbnail, .uploader__file-list__thumbnail, .file-list__text, .uploader__file-list__text, .file-list__size, .uploader__file-list__size, .file-list__button, .uploader__file-list__button { display: table-cell; vertical-align: middle; } .file-list__thumbnail, .uploader__file-list__thumbnail { width: 10%; } .file-list__text, .uploader__file-list__text { width: 60%; word-break: break-word; } .file-list__size, .uploader__file-list__size { width: 25%; } .file-list__button, .uploader__file-list__button { width: 5%; } .icon, .uploader__icon { font-size: 2em; margin: 10px; text-decoration: none; } .icon--close { color: #d2d2d2; } .icon--spinner, .uploader__icon--spinner { margin: 1em; } .thumbnail { max-height: 50px; max-width: 50px; height: auto; width: auto; padding: 0.2em; } body { font-family: "Source Sans Pro", sans-serif; font-size: 1em; } h1, h2, h3, h4, h5, h6 { font-family: "Source Sans Pro", sans-serif; margin: 0; } h1, .primary-heading { font-size: 2em; } h2, .secondary-heading { font-size: 1.8em; } h3, .tertiary-heading { font-size: 1.5em; } h4, h5, h6 { font-size: 1.2em; } .text--important, .uploader__instructions { font-size: 1.2em; } .l-main { max-width: 64em; margin-left: auto; margin-right: auto; } .l-main:after { content: " "; display: block; clear: both; } .l-site-title { width: 100%; float: left; margin-left: 0; margin-right: 0; margin-left: 8.47458%; } .l-center-box { width: 66.10169%; float: left; margin-right: 1.69492%; margin-left: 16.94915%; } .site-header { margin-bottom: 3em; } .site-title { color: #ff8598; font-size: 0.8em; padding: 1.5em 0; text-transform: uppercase; } .uploader__box { animation: appear 1s; background-color: white; box-shadow: -2px 2px 20px #d2d2d2; text-align: center; transition: all 0.5s; margin-bottom: 1em; } @keyframes appear { from { margin-top: 3em; opacity: 0; } to { margin-top: 0; opacity: 1; } } .uploader__contents { padding: 3em; margin-top: 0; opacity: 1; transition: all 0.4s; } .uploader__file-label, .uploader__box .button--secondary { margin: 2em auto; } .uploader__file-label--secondary { display: inline-block; margin: 0 0.5em; } .uploader__further-instructions { margin-left: 16.94915%; clear: both; color: #969696; font-size: 0.9em; padding: 0.5em; }

demo.css

body, html { font-size: 100%;     padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

body{
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

normalize.css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr

{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

背景代码吸收前端的文件数据

@RequestMapping(value = "/add")
    public void add(@RequestParam("files[]") MultipartFile[] file,String group,Model model,HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        log.info("增加图例最先");
        Map<String, Object> resultMap = imagesService.add(file,group);
        response.setContentType("application/json; charset=UTF-8");
        response.getWriter().write(new Gson().toJson(resultMap));
        log.info("增加图例完毕");
    }
@Override
    public Map<String, Object> add(MultipartFile[] MultipartFile, String group) {
        Map<String, Object> resultMap = new HashMap<>();
        String path = "";
        try {
            for (int i = 0; i < MultipartFile.length; i++) {
                MultipartFile file = MultipartFile[i];
                String fileName = file.getOriginalFilename();
                long fileSize = file.getSize();
                ImageInfo ImageFind = imageInfoMapper.selectByPrimaryKey(fileName);
                if (ImageFind != null) {
                    resultMap.put("message", "该图例称号已存在");
                    resultMap.put("success", false);
                    return resultMap;
                }
                ImageInfo imageInfo = new ImageInfo();
                if (group.equals("1")) {
                    imageInfo.setGroups("高等");
                    path = updatepath + "/advanced/" + fileName;
                } else if (group.equals("3")) {
                    imageInfo.setGroups("基础");
                    path = updatepath + "/base/" + fileName;
                } else {
                    imageInfo.setGroups("自定义");
                    path = updatepath + "/customize/" + fileName;
                }
                log.info("path:"+path);
                File f = new File(path);
                if (!f.getParentFile().exists())
                    f.getParentFile().mkdirs();
                file.transferTo(f);
                imageInfo.setName(fileName);
                imageInfo.setPath(path);
                imageInfo.setSize(Double.valueOf(fileSize));
                int j = imageInfoMapper.insert(imageInfo);
                boolean result = (j == 0) ? false : true;
                resultMap.put("message", (result) ? "增加胜利" : "增加失利");
                resultMap.put("success", result);
                resultMap.put("resultCode", "00000003");
                resultMap.put("time", CommonUtil.getSimpleFormatTimestamp());
            }
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        return resultMap;

    }

再今后和数据库的交互我就不写了

小菜一枚,不正确的地方请批评指正

    原文作者:EVAO_大个子
    原文地址: https://segmentfault.com/a/1190000019409056
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞