Kann jemand erklären, wie das Plugin zum Hochladen von jQuery-Dateien implementiert wird?

116

EDIT (Okt 2019):

6 Jahre später und jQuery File Upload macht die Leute eindeutig immer noch wahnsinnig. Wenn Sie in den Antworten hier wenig Trost finden, suchen Sie in NPM nach einer modernen Alternative. Es ist den Aufwand nicht wert, das verspreche ich.

Ich habe Uploadify in der vorherigen Bearbeitung empfohlen, aber wie ein Kommentator betonte, scheinen sie keine kostenlose Version mehr anzubieten. Uploadify war sowieso so 2013.


BEARBEITEN:

Dies scheint immer noch Verkehr zu bekommen, also werde ich erklären, was ich letztendlich getan habe. Ich habe das Plugin schließlich zum Laufen gebracht, indem ich dem Tutorial in der akzeptierten Antwort gefolgt bin. Das Hochladen von jQuery-Dateien ist jedoch ein echtes Problem . Wenn Sie nach einem einfacheren Plugin zum Hochladen von Dateien suchen, würde ich Uploadify wärmstens empfehlen . Als Antwort wurde darauf hingewiesen, dass es nur für den nichtkommerziellen Gebrauch kostenlos ist.


Hintergrund

Ich versuche, den jQuery-Datei-Upload von blueimp zu verwenden , damit Benutzer Dateien hochladen können. Nach dem Auspacken funktioniert es einwandfrei und folgt den Anweisungen zum Einrichten. Aber um es praktisch auf meiner Website zu verwenden, möchte ich in der Lage sein, einige Dinge zu tun:

  • Fügen Sie den Uploader auf einer meiner vorhandenen Seiten ein
  • Ändern Sie das Verzeichnis für hochgeladene Dateien

Alle Dateien für das Plugin befinden sich in einem Ordner unter dem Stammverzeichnis.

Ich habe es versucht...

  • Verschieben Sie die Demoseite in das Stammverzeichnis und aktualisieren Sie die Pfade für die erforderlichen Skripte
  • Ändern der Optionen 'upload_dir' und 'upload_url' in der Datei UploadHandler.php wie hier vorgeschlagen .
  • Ändern der URL in der zweiten Zeile des Demo-Javascript

In allen Fällen wird die Vorschau angezeigt und der Fortschrittsbalken wird ausgeführt, aber die Dateien können nicht hochgeladen werden. In der Konsole wird folgende Fehlermeldung angezeigt : Uncaught TypeError: Cannot read property 'files' of undefined. Ich verstehe nicht, wie alle Teile des Plugins funktionieren, was das Debuggen erschwert.

Code

Das Javascript auf der Demoseite:

$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
    uploadButton = $('<button/>')
        .addClass('btn')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });
$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    autoUpload: false,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 5000000, // 5 MB
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
    disableImageResize: /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    previewMaxWidth: 100,
    previewMaxHeight: 100,
    previewCrop: true
}).on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
    $.each(data.files, function (index, file) {
        var node = $('<p/>')
                .append($('<span/>').text(file.name));
        if (!index) {
            node
                .append('<br>')
                .append(uploadButton.clone(true).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(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
}).on('fileuploadprogressall', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
    );
}).on('fileuploaddone', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var link = $('<a>')
            .attr('target', '_blank')
            .prop('href', file.url);
        $(data.context.children()[index])
            .wrap(link);
    });
}).on('fileuploadfail', function (e, data) {
    $.each(data.result.files, function (index, file) {
        var error = $('<span/>').text(file.error);
        $(data.context.children()[index])
            .append('<br>')
            .append(error);
    });
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
});


Ich bin überrascht über den Mangel an Dokumentation; Es scheint, als sollte es einfach sein, etwas zu ändern. Ich würde mich freuen, wenn jemand erklären könnte, wie das geht.

Austen
quelle
10
Gutes Fragenformat. Schön, Organisation zu sehen.
Jdero
Drucken Sie 'e' und 'data' in der Konsole direkt vor der Fehlerzeile. Was sind die Werte?
John 4d5
3
Uploadi fy ist eine MIT-Lizenz, zB ist sie völlig kostenlos. Allerdings kostet Uploadi Five von derselben Entwickler- / Website je nach Nutzung 5 bis 100 US-Dollar
MartinJH
2
In zwei Jahren ist die jQuery-File-Upload-Dokumentation nicht besser geworden. Argh.
Chuck Le Butt
1
@MartinJH Möglicherweise gab es irgendwann einen Upload, aber ab sofort gibt es nur noch einen - die kostenpflichtige uploadiFive-Version. Und es gibt auch keine Demo; Es ist nur ein Video. Schlechte Form.
Steve Horvath

Antworten:

72

Ich habe vor einigen Tagen nach einer ähnlichen Funktionalität gesucht und bin auf ein gutes Tutorial zum Tutorialzine gestoßen. Hier ist ein Arbeitsbeispiel. Das vollständige Tutorial finden Sie hier .

Einfaches Formular zum Halten des Dialogs zum Hochladen von Dateien:

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
  <input type="file" name="uploadctl" multiple />
  <ul id="fileList">
    <!-- The file list will be shown here -->
  </ul>
</form>

Und hier ist der jQuery-Code zum Hochladen der Dateien:

$('#upload').fileupload({

  // This function is called when a file is added to the queue
  add: function (e, data) {
    //This area will contain file list and progress information.
    var tpl = $('<li class="working">'+
                '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+
                '<p></p><span></span></li>' );

    // Append the file name and file size
    tpl.find('p').text(data.files[0].name)
                 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

    // Add the HTML to the UL element
    data.context = tpl.appendTo(ul);

    // Initialize the knob plugin. This part can be ignored, if you are showing progress in some other way.
    tpl.find('input').knob();

    // Listen for clicks on the cancel icon
    tpl.find('span').click(function(){
      if(tpl.hasClass('working')){
              jqXHR.abort();
      }
      tpl.fadeOut(function(){
              tpl.remove();
      });
    });

    // Automatically upload the file once it is added to the queue
    var jqXHR = data.submit();
  },
  progress: function(e, data){

        // Calculate the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);

        // Update the hidden input field and trigger a change
        // so that the jQuery knob plugin knows to update the dial
        data.context.find('input').val(progress).change();

        if(progress == 100){
            data.context.removeClass('working');
        }
    }
});
//Helper function for calculation of progress
function formatFileSize(bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }

    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }

    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }
    return (bytes / 1000).toFixed(2) + ' KB';
}

Und hier ist das PHP-Codebeispiel zur Verarbeitung der Daten:

if($_POST) {
    $allowed = array('jpg', 'jpeg');

    if(isset($_FILES['uploadctl']) && $_FILES['uploadctl']['error'] == 0){

        $extension = pathinfo($_FILES['uploadctl']['name'], PATHINFO_EXTENSION);

        if(!in_array(strtolower($extension), $allowed)){
            echo '{"status":"error"}';
            exit;
        }

        if(move_uploaded_file($_FILES['uploadctl']['tmp_name'], "/yourpath/." . $extension)){
            echo '{"status":"success"}';
            exit;
        }
        echo '{"status":"error"}';
    }
    exit();
}

Der obige Code kann zu jedem vorhandenen Formular hinzugefügt werden. Dieses Programm lädt automatisch Bilder hoch, sobald sie hinzugefügt wurden. Diese Funktionalität kann geändert werden und Sie können das Bild senden, während Sie Ihr vorhandenes Formular senden.

Meine Antwort wurde mit dem aktuellen Code aktualisiert. Alle Credits an den ursprünglichen Autor des Codes.

Quelle: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

Subrat Pattnaik
quelle
2
Können Sie die wichtigen Teile dieses Tutorials hier kopieren? Wenn es also verschwindet, ist Ihre Antwort immer noch nützlich?
1
aber seien Sie vorsichtig, um nicht zu plagiieren
Tacaswell
1
ACHTUNG: Wenn Sie das PHP-Code-Snippet verwenden, entfernen Sie die if($_POST) Anweisung. POST soll leer sein, der Dateiinhalt wird gesendet $_FILES['upfile']['tmp_name']. Hoffentlich spart dies jemandem etwas Zeit.
Edward
1
Gefunden eine andere c-sharpcorner.com/UploadFile/da55bf/…
Rush.2707
kann mir jemand vorschlagen, welche js / jquery-Dateien benötigt werden, um das obige Skript auszuführen
Manasa
28

Ich habe gerade 2 Stunden mit jQuery Upload gekämpft, aber wegen der Menge an Abhängigkeiten aufgegeben (ich hatte 13 JS-Dateien enthalten, um alle Schnickschnack zu bekommen).

Ich habe ein bisschen mehr gesucht und bin auf ein ordentliches Projekt namens Dropzone.js gestoßen , das keine Abhängigkeiten hat.

Der Autor hat auch eine Bootstrap-Demo erstellt, die vom jQuery File Upload-Plugin inspiriert wurde.

Ich hoffe, das spart jemand anderem etwas Zeit.

Tim
quelle
1
Wichtig zu beachten: Dropzone.js sieht gut aus, unterstützt jedoch nur IE10 und höher. Unterstützung für das Hochladen von jQuery-Dateien von IE6;)
Nickvda
11
Das Hochladen von jQuery-Dateien ist einfach unmöglich, damit es funktioniert ... Ich habe viele Stunden damit verbracht, es zu versuchen, weil es sehr schöne Funktionen hat, aber in letzter Minute war meine Seele nur voller Qualen !!! Was für eine Verzweiflung !!! Dann habe ich Ihren Beitrag über Dropzone.js gesehen und in 5 Minuten habe ich es geschafft und so, wie ich es wollte! Du hast mich gerettet ...
Rigon
Ich kann Ihnen nicht genug danken, ich habe fast 12 Stunden damit verbracht, jQuery-FIle-Upload so zu machen , wie ich es möchte, und schließlich bin ich auf diese Frage gestoßen. Du hast mich gerettet.
ndd
Hier ist ein Beispiel für das Hochladen einer datenbankgesteuerten JQuery-Datei: github.com/CodeHeight/ImageLibrary
JoshYates1980
Ich habe 3 Tage verbracht, aber ich kann ihren Code immer noch nicht anpassen
May Weather VN
4

Ich hatte auch Probleme damit, aber es funktionierte, als ich herausfand, wie die Pfade in UploadHandler.php funktionieren: upload_dir und upload_url sind die einzigen Einstellungen, die überprüft werden müssen, damit es funktioniert. Überprüfen Sie auch Ihre Serverfehlerprotokolle auf Debugging-Informationen.

Louis Ferreira
quelle
3

Schauen Sie sich den Image Drag & Drop Uploader mit Bildvorschau mit dem Dropper JQuery Plugin an.

HTML

<div class="target" width="78" height="100"><img /></div>

JS

$(".target").dropper({
    action: "upload.php",

}).on("start.dropper", onStart);
function onStart(e, files){
console.log(files[0]);

    image_preview(files[0].file).then(function(res){
$('.dropper-dropzone').empty();
//$('.dropper-dropzone').css("background-image",res.data);
 $('#imgPreview').remove();        
$('.dropper-dropzone').append('<img id="imgPreview"/><span style="display:none">Drag and drop files or click to select</span>');
var widthImg=$('.dropper-dropzone').attr('width');
        $('#imgPreview').attr({width:widthImg});
    $('#imgPreview').attr({src:res.data});

    })

}

function image_preview(file){
    var def = new $.Deferred();
    var imgURL = '';
    if (file.type.match('image.*')) {
        //create object url support
        var URL = window.URL || window.webkitURL;
        if (URL !== undefined) {
            imgURL = URL.createObjectURL(file);
            URL.revokeObjectURL(file);
            def.resolve({status: 200, message: 'OK', data:imgURL, error: {}});
        }
        //file reader support
        else if(window.File && window.FileReader)
        {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function () {
                imgURL = reader.result;
                def.resolve({status: 200, message: 'OK', data:imgURL, error: {}});
            }
        }
        else {
            def.reject({status: 1001, message: 'File uploader not supported', data:imgURL, error: {}});
        }
    }
    else
        def.reject({status: 1002, message: 'File type not supported', error: {}});
    return def.promise();
}

$('.dropper-dropzone').mouseenter(function() {
 $( '.dropper-dropzone>span' ).css("display", "block");
});

$('.dropper-dropzone').mouseleave(function() {
 $( '.dropper-dropzone>span' ).css("display", "none");
});

CSS

.dropper-dropzone{
    width:78px;
padding:3px;
    height:100px;
position: relative;
}
.dropper-dropzone>img{
    width:78px;
    height:100px;
margin-top=0;
}

.dropper-dropzone>span {
    position: absolute;
    right: 10px;
    top: 20px;
color:#ccc;


}

.dropper .dropper-dropzone{

padding:3px !important    
}

Demo Jsfiddle

tvshajeer
quelle
Dies ist eine äußerst einfache Lösung.
Miron
2

Dies ist ein gutes Angular-Plugin zum Hochladen von Dateien und kostenlos!

eckige Datei hochladen

Sahip
quelle
2
Hallo. Bitte posten Sie keine Links als Antworten. Wenn die Website offline geschaltet wird oder sich der Link ändert, wird Ihre Antwort unbrauchbar. Verwenden Sie stattdessen die Informationen auf der Website, um Ihre Antwort zu erstellen, und verwenden Sie den Link nur als Referenz. Vielen Dank.
Cthulhu
1

Ich hatte eine Weile mit diesem Plugin auf Rails zu kämpfen, und dann hat jemand es gemifiziert und den gesamten Code, den ich erstellt hatte, überholt.

Es sieht zwar so aus, als würden Sie dies nicht in Rails verwenden, aber wenn jemand es verwendet, sehen Sie sich dieses Juwel an . Die Quelle ist hier -> jQueryFileUpload Rails .

Aktualisieren:

Um den Kommentator zufrieden zu stellen, habe ich meine Antwort aktualisiert. Im Wesentlichen " Verwenden Sie dieses Juwel , hier ist der Quellcode " Wenn es verschwindet, dann tun Sie es auf dem langen Weg.

Ingenieur Dave
quelle
1

Droply.js ist dafür perfekt. Es ist einfach und wird mit einer Demo-Site geliefert, die sofort funktioniert.

Gerämie
quelle
0

Sie können uploadify verwenden. Dies ist das beste Multiupload-JQuery-Plugin, das ich verwendet habe.

Die Implementierung ist einfach, die Browserunterstützung ist perfekt.

KORSAR
quelle
7
erfordert Flash ... :(
Eva
2
Sie können HTML 5 Version verwenden :)
CORSAIR
5
Wenn ich mich nicht irre, ist die HTML5-Version von uploadify nicht kostenlos. Es kostet 5 $. uploadify.com/download
0112
2
Aber das sind nur 5 $, nicht 500.
CORSAIR
7
Denken Sie daran, wenn Sie uploadify für kommerzielle Zwecke verwenden möchten, müssen Sie die kommerzielle Lizenz (100 US-Dollar) kaufen. Uplifyify.com/download/download-uploadifive-commercial
Tim
0

Für das UI-Plugin mit JSP-Seite und Spring MVC.

Beispiel HTML . Muss sich in einem Formularelement mit dem ID- Attribut fileupload befinden

    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="fileupload-buttonbar">
    <div>
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files</span>
            <input id="fileuploadInput" type="file" name="files[]" multiple>
        </span>
        <%-- https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined --%>
        <button type="button" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>
    <!-- The global progress state -->
    <div class="fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/css/jquery.fileupload-ui.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-file-upload-9.14.2/js/jquery.fileupload-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
            var maxFileSizeBytes = ${maxFileSizeBytes};
        if (maxFileSizeBytes < 0) {
            //-1 or any negative value means no size limit
            //set to undefined
            ///programming/5795936/how-to-set-a-javascript-var-as-undefined
            maxFileSizeBytes = void 0;
        }

        //https://github.com/blueimp/jQuery-File-Upload/wiki/Options
        ///programming/34063348/jquery-file-upload-basic-plus-ui-and-i18n
        ///programming/11337897/how-to-customize-upload-download-template-of-blueimp-jquery-file-upload
        $('#fileupload').fileupload({
            url: '${pageContext.request.contextPath}/app/uploadResources.do',
            fileInput: $('#fileuploadInput'),
            acceptFileTypes: /(\.|\/)(jrxml|png|jpe?g)$/i,
            maxFileSize: maxFileSizeBytes,
            messages: {
                acceptFileTypes: '${fileTypeNotAllowedText}',
                maxFileSize: '${fileTooLargeMBText}'
            },
            filesContainer: $('.files'),
            uploadTemplateId: null,
            downloadTemplateId: null,
            uploadTemplate: function (o) {
                var rows = $();
                $.each(o.files, function (index, file) {
                    var row = $('<tr class="template-upload fade">' +
                            '<td><p class="name"></p>' +
                            '<strong class="error text-danger"></strong>' +
                            '</td>' +
                            '<td><p class="size"></p>' +
                            '<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
                            '<div class="progress-bar progress-bar-success" style="width:0%;"></div></div>' +
                            '</td>' +
                            '<td>' +
                            (!index && !o.options.autoUpload ?
                                    '<button class="btn btn-primary start" disabled>' +
                                    '<i class="glyphicon glyphicon-upload"></i> ' +
                                    '<span>${startText}</span>' +
                                    '</button>' : '') +
                            (!index ? '<button class="btn btn-warning cancel">' +
                                    '<i class="glyphicon glyphicon-ban-circle"></i> ' +
                                    '<span>${cancelText}</span>' +
                                    '</button>' : '') +
                            '</td>' +
                            '</tr>');
                    row.find('.name').text(file.name);
                    row.find('.size').text(o.formatFileSize(file.size));
                    if (file.error) {
                        row.find('.error').text(file.error);
                    }
                    rows = rows.add(row);
                });
                return rows;
            },
            downloadTemplate: function (o) {
                var rows = $();
                $.each(o.files, function (index, file) {
                    var row = $('<tr class="template-download fade">' +
                            '<td><p class="name"></p>' +
                            (file.error ? '<strong class="error text-danger"></strong>' : '') +
                            '</td>' +
                            '<td><span class="size"></span></td>' +
                            '<td>' +
                            (file.deleteUrl ? '<button class="btn btn-danger delete">' +
                                    '<i class="glyphicon glyphicon-trash"></i> ' +
                                    '<span>${deleteText}</span>' +
                                    '</button>' : '') +
                            '<button class="btn btn-warning cancel">' +
                            '<i class="glyphicon glyphicon-ban-circle"></i> ' +
                            '<span>${clearText}</span>' +
                            '</button>' +
                            '</td>' +
                            '</tr>');
                    row.find('.name').text(file.name);
                    row.find('.size').text(o.formatFileSize(file.size));
                    if (file.error) {
                        row.find('.error').text(file.error);
                    }
                    if (file.deleteUrl) {
                        row.find('button.delete')
                                .attr('data-type', file.deleteType)
                                .attr('data-url', file.deleteUrl);
                    }
                    rows = rows.add(row);
                });
                return rows;
            }
        });

    });
</script>

Beispiel für das Hochladen und Löschen von Anforderungshandlern

    @PostMapping("/app/uploadResources")
public @ResponseBody
Map<String, List<FileUploadResponse>> uploadResources(MultipartHttpServletRequest request,
        Locale locale) {
    //https://github.com/jdmr/fileUpload/blob/master/src/main/java/org/davidmendoza/fileUpload/web/ImageController.java
    //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler
    Map<String, List<FileUploadResponse>> response = new HashMap<>();
    List<FileUploadResponse> fileList = new ArrayList<>();

    String deleteUrlBase = request.getContextPath() + "/app/deleteResources.do?filename=";

    //http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/multipart/MultipartRequest.html
    Iterator<String> itr = request.getFileNames();
    while (itr.hasNext()) {
        String htmlParamName = itr.next();
        MultipartFile file = request.getFile(htmlParamName);
        FileUploadResponse fileDetails = new FileUploadResponse();
        String filename = file.getOriginalFilename();
        fileDetails.setName(filename);
        fileDetails.setSize(file.getSize());
        try {
            String message = saveFile(file);
            if (message != null) {
                String errorMessage = messageSource.getMessage(message, null, locale);
                fileDetails.setError(errorMessage);
            } else {
                //save successful
                String encodedFilename = URLEncoder.encode(filename, "UTF-8");
                String deleteUrl = deleteUrlBase + encodedFilename;
                fileDetails.setDeleteUrl(deleteUrl);
            }
        } catch (IOException ex) {
            logger.error("Error", ex);
            fileDetails.setError(ex.getMessage());
        }

        fileList.add(fileDetails);
    }

    response.put("files", fileList);

    return response;
}

@PostMapping("/app/deleteResources")
public @ResponseBody
Map<String, List<Map<String, Boolean>>> deleteResources(@RequestParam("filename") List<String> filenames) {
    Map<String, List<Map<String, Boolean>>> response = new HashMap<>();
    List<Map<String, Boolean>> fileList = new ArrayList<>();

    String templatesPath = Config.getTemplatesPath();
    for (String filename : filenames) {
        Map<String, Boolean> fileDetails = new HashMap<>();

        String cleanFilename = ArtUtils.cleanFileName(filename);
        String filePath = templatesPath + cleanFilename;

        File file = new File(filePath);
        boolean deleted = file.delete();

        if (deleted) {
            fileDetails.put(cleanFilename, true);
        } else {
            fileDetails.put(cleanFilename, false);
        }

        fileList.add(fileDetails);
    }

    response.put("files", fileList);

    return response;
}

Beispielklasse zum Generieren der erforderlichen JSON-Antwort

    public class FileUploadResponse {
    //https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

    private String name;
    private long size;
    private String error;
    private String deleteType = "POST";
    private String deleteUrl;

    /**
     * @return the name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name the name to set
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return the size
     */
    public long getSize() {
        return size;
    }

    /**
     * @param size the size to set
     */
    public void setSize(long size) {
        this.size = size;
    }

    /**
     * @return the error
     */
    public String getError() {
        return error;
    }

    /**
     * @param error the error to set
     */
    public void setError(String error) {
        this.error = error;
    }

    /**
     * @return the deleteType
     */
    public String getDeleteType() {
        return deleteType;
    }

    /**
     * @param deleteType the deleteType to set
     */
    public void setDeleteType(String deleteType) {
        this.deleteType = deleteType;
    }

    /**
     * @return the deleteUrl
     */
    public String getDeleteUrl() {
        return deleteUrl;
    }

    /**
     * @param deleteUrl the deleteUrl to set
     */
    public void setDeleteUrl(String deleteUrl) {
        this.deleteUrl = deleteUrl;
    }

}

Siehe https://pitipata.blogspot.co.ke/2017/01/using-jquery-file-upload-ui.html

Timothy Anyona
quelle