關於 使用JQUERY FILE UPLOAD 一次submit 上傳

 <!-- Fonts -->
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../css/manage.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="../css/style.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="../css/jquery.fileupload.css">
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="../js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="../js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="../js/jquery.fileupload.js"></script>
<script src="../js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="../js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="../js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="../js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="../js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="../js/jquery.fileupload-validate.js"></script>

 var filesList = new Array();
       $(function () {
           $('#fileupload').fileupload({
               autoUpload: false
           }).on('fileuploadadd', function (e, data) {
               data.context = $('<div/><br/>', { class: 'thumbnail pull-left' }).appendTo('#files');
               $.each(data.files, function (index, file) {
                   filesList.push(data.files[index]);
                   console.log("Added: " + data.files[index].name);
                   var node = $('<p/>').append($('<span/>').text(file.name).data(data));
                   node.appendTo(data.context);
               });
           }).on('fileuploadprocessalways', function (e, data) {
               var index = data.index,
                   file = data.files[index],
                   node = $(data.context.children()[index]);
               if (file.preview) {
                   node.prepend('<br>').prepend(file.preview);
               }
               if (file.error) {
                   node.append('<br>').append($('<span class="text-danger"/>').text(file.error));
               }
           }).prop('disabled', !$.support.fileInput)
               .parent().addClass($.support.fileInput ? undefined : 'disabled');
           
           $("#uploadform").submit(function(event) {
               if (filesList.length > 0) {
                   console.log("multi file submit");
                   event.preventDefault();
                   $('#fileupload').fileupload('send', {files: filesList})
                       .success(function (result, textStatus, jqXHR) { console.log('success'); })
                       .error(function (jqXHR, textStatus, errorThrown) { console.log('error'); })
                       .complete(function (result, textStatus, jqXHR) { 
                           console.log('complete: ' + JSON.stringify(result));
                           // window.location='back to view-page after submit?'
                       });
               } else {
                   console.log("plain default form submit");
               }
           });
       });
<form id="uploadform" method="POST" enctype="multipart/form-data">
 <span class="btn btn-success fileinput-button"> 
 <i class="glyphicon glyphicon-plus"></i> 
 <span>增加檔案</span> 
 <input id="fileupload" type="file" name="files" multiple="multiple">
 </span>
</form >