Fileupload von WindowsExplorer mit Drag & Drop

Question

Hi,

wie kann ich eine Datei vom Windows Verzeichnis in den Browser (in DIV) mit Drag & Drop ziehen und an den Dateipfad rankommen?

Ich möchte die Datei Hochladen auf den Server.

Answer 1

Hallo Alex,

dafür gibt es einige Beispiele. Der serverseitige Part ist abhängig von der verwendeten ASP.NET Projektart.

  ASP.NET Multiple File Upload With Drag & Drop and Progress Bar Using HTML5

  Implementing an HTML5 drag & drop based file upload in ASP.NET MVC 3

  ASP.Net: drag and drop file uploads using HTML5 DND and File API.

---

Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET
http://www.asp-solutions.de/ - Consulting, Development
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

Answer 2

Hallo Alex,

sowas geht mit Javascript. Das folgende beispiel erforder noch jQuery

    var obj = $('.fileUploadBox');//Input Tag

    obj.on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    
    $(document).on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        obj.css('border', '2px dotted #0B85A1');
    });
    $(document).on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });

    obj.on('drop', function (e) {

        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;

        var fd = new FormData();
        fd.append('file', files[0])

        AjaxUpload(fd);

    });

Hier noch ein weiters beispiel Link

---

Gruß, Thomas

Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

Icon für UWP