jquery file upload plugin- ausgewählter Dateiname wird nicht angezeigt

Question

Ich benutze jquery file upload plugin (basic) um einzelne Dateien gleichzeitig hochzuladen. Plugin funktioniert gut und ich kann Dateien im richtigen Verzeichnis, alles gut! Wenn ich jedoch eine Datei auswähle, wird der Name (Chrome)/Pfad (IE) der ausgewählten Datei nicht angezeigt, stattdessen wird nur "Keine Datei ausgewählt" angezeigt. Wie kann ich es ändern, um den Namen der ausgewählten Datei anzuzeigen? Mein Code:

Script:

$(function() { 
      $('#fileupload').fileupload({ 
       dataType: 'json', 
       url: '@Url.Action("Index", "Home")', 
       add: function (e, data) { 
        data.submit(); 
       }, 
       progress: function (e, data) { 
        var progress = parseInt(data.loaded/data.total * 100, 10); 
        $('#progress .bar').css('width', progress + '%'); 

       }, 
       done: function (e, data) { 
        $('<p/>').text(data.files[0].name).appendTo(document.body);       
       } 
       //multipart: false 
      });    

     }); 

Homecontroller:

[HttpPost] 
    public ActionResult Index(HttpPostedFileBase files) 
    {   
     return Json(files.FileName); 
    }  

Index:

<input id="fileupload" type="file" name="files"/> 
<div id="progress" style="width: 250px"> 
    <div class="bar" style="width: 0%;"></div> 
</div> 

Answer 1

Führen Sie die folgenden Argumente an den Fileupload Aufruf:

$('#fileupload').fileupload({ 

    formData:{extra:1}, 
    autoUpload: false, 
    url: "uploader.php", 
    replaceFileInput:false, 
    fileInput: $("input:file") 
}); 

replaceFileInput:false ist die gewählten Dateinamen für die Anzeige

Answer 2

Wenn ich Sie richtig verstehe, wollen, sind Sie auswählen zu können, Ihre Dateien und dann haben ihre Namen auf dem Bildschirm angezeigt ... Wenn dies der Fall ist, sollten Sie etwas wie folgt versuchen:

HTML:

<!--Don't forget to wrap your form elements inside a form--> 
<input id="fileupload" type="file" name="files" /> 

<ul id="selected-files"> 
    <!--File names will be displayed here--> 
</ul> 

<div id="progress" style="width: 250px"> 
    <div class="bar" style="width: 0%;"></div> 
</div> 

Es sieht aus wie Sie die meisten Ihrer Skript haben Arbeit (basierend weg, was Sie gesagt haben); also werden wir nur ein paar Dinge ändern. Zuerst werden wir den data.file Befehl (nach dem Optimieren) in die add: Funktion verschieben ... als nächstes werden wir ein paar benutzerdefinierte vars erstellen, um die Dateinamen mit einer bestimmten Reihenfolge anzuzeigen (und in der Lage zu sein, sie einfacher zu gestalten). .

Script:

$(function() { 

    var ul = $('#selected-files'); 

    $('#fileupload').fileupload({ 
     dataType: 'json', 
     url: '@Url.Action("Index", "Home")', 

     add: function (e, data) { 
      var selectedFiles = $('<li class="file-name"><p></p></li>'); 
      selectedFiles.find('p').text(data.files[0].name); 
      data.context = selectedFiles.appendTo(ul); 

      data.submit(); 
     }, 

     progress: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .bar').css('width', progress + '%'); 
     } 

     //multipart: false 

    });    

}); 

Ich muss zugeben, ich würde das nicht auf meinem eigenen herausgefunden haben ... dank Martin Angelov's Tutorial-Dateien zum Hochladen von Jquery-Datei-Upload-Plugins verwenden blueimp. ;)

ich hoffe das hilft!