如题，图片批量上传，效果如图所示
上代码
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[title] {
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[title]{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;
}再往后和数据库的交互我就不写了
小菜一枚，不正确之处请批评指正
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。