plugin tải lên tệp jquery- tên tệp được chọn không được hiển thị

Question

Tôi đang sử dụng plugin tải lên tệp jquery (cơ bản) để tải lên một tệp tại một thời điểm. Plugin hoạt động tốt và tôi có thể xem các tệp được bán phá giá trong thư mục chính xác, tất cả đều tốt! Tuy nhiên khi tôi chọn một tệp, tên (Chrome)/đường dẫn (IE) của tệp đã chọn sẽ không được hiển thị, thay vào đó nó chỉ hiển thị "Không có tệp được chọn". Làm thế nào tôi có thể thay đổi nó để hiển thị tên của tập tin được chọn? Mã của tôi:

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

Vượt qua các đối số sau đây để cuộc gọi FileUpload:

$('#fileupload').fileupload({ 

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

replaceFileInput:false là để hiển thị tên tập tin được lựa chọn

Answer 2

Nếu tôi hiểu bạn một cách chính xác, bạn đang mong muốn để có thể chọn của bạn tập tin và sau đó có tên hiển thị trên màn hình của bạn ... Nếu đây là trường hợp bạn nên thử một cái gì đó như thế này:

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> 

Dường như bạn đã có hầu hết kịch bản của bạn làm việc (dựa trên những gì bạn nói); vì vậy chúng tôi sẽ chỉ thay đổi một vài thứ. Đầu tiên, chúng ta sẽ di chuyển lệnh data.file (sau khi tinh chỉnh nó) vào hàm add: thay vì ... tiếp theo, chúng ta sẽ tạo một vài tùy chỉnh vars để hiển thị tên tệp với một số thứ tự (và có thể tạo kiểu cho chúng dễ dàng hơn) .

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 

    });    

}); 

Tôi phải thừa nhận tôi sẽ không figured này ra vào của riêng tôi ... nhờ Martin Angelov's hướng dẫn về upload các file sử dụng plugin jquery-file-upload blueimp của. ;)

Tôi hy vọng điều này sẽ hữu ích!