Hỗ trợ crossload Ajax jQuery AJAX Fileupload

Question

Tôi hiện đang làm việc trên một tập tin tải lên tập tin AJAX, mà hoạt động như một nét duyên dáng trong Firefox nhưng không hoạt động trong IE.

đây là HTML cơ bản tôi đang sử dụng:

<form > 
    <input type="file" name="FileFields" id="FileFields"/> 
    <button type="button" onclick="uploadFile();" id="uploadButton">Upload</button> 
    <ul id="files"/> 
    ... other form elements ... 
</form> 

<div id="fileUploadDiv"/> 

này là chức năng UploadFile:

function uploadFile() 
{ 
    //we don't want more then 5 files uploaded 
    if($('#files li').size() >= 5) 
    { 
     return; 
    } 
    //disable the upload button 
    $('#uploadButton').attr('disabled','disabled'); 
    //show loading animation 
    $('#files').append(
     $('<li>') 
      .attr('id','loading') 
      .append(
       $('<img>').attr('src','/images/loading.gif') 
      ) 
      .addClass('loading') 
    ); 

    //add all neccessary elements (the form and the iframe) 
    $('#fileUploadDiv').append(
     $('<form action="/uploadFile" method="post" id="fileUploadForm">') 
      .attr('enctype','multipart/form-data') 
      .attr('encoding', 'multipart/form-data') 
      .attr('target', 'upload_frame') 
      .append(
       $('#FileFields').clone() 
        .css('visibility','hidden') 
     ) 
     .append(
      $('<iframe>').attr('name','upload_frame') 
       .load(function(){finishedPostingFile();}) 
       .attr('id','upload_frame') 
       .attr('src','') 
       .css({ 
        'width':'0px', 
        'height':'0px', 
        'border':'0px none #fff' 
       }) 

     ) 
    ); 


    //start uploading the file 
    $('#fileUploadForm').submit(); 
} 

và finishedPostingFile() sẽ được gọi trở lại chức năng khi iframe đã hoàn tất gửi bài /tải.

Bây giờ, tính năng này hoạt động như một nét duyên dáng trong Firefox nhưng không hoạt động trong IE. Tôi đã tìm ra rằng IE cần attr('encoding',...) thay vì attr('enctype',...) và tôi cũng đã thử nó mà không cần tạo biểu mẫu và khung nội tuyến khi đang di chuyển bằng cách viết các phần tử đó dưới dạng html thuần túy, điều này thực sự không tạo ra sự khác biệt.

IE (IE8, được bê tông, chưa thử nghiệm trong < 8) không đưa ra lỗi và hoạt ảnh tải chỉ tiếp tục quay mà không có tệp nào được tải lên ... Bất kỳ ai cũng có ý tưởng về cách thực hiện công việc này?

Answer 1

Tại sao không sử dụng điều này, http://valums.com/ajax-upload/?

Hoặc ít nhất hãy xem mã của họ để xem đúng cách để tạo Biểu mẫu sẽ hoạt động trên trình duyệt chéo.

Answer 2

đây là ví dụ làm việc cho Firefox/IE7/IE8, tôi hiện đang sử dụng hộp thoại jqueryUI cho thanh tiến trình.

chỉ thay thế "DocumentUploadForm" với Id của mẫu của bạn

$(document).ready(function() { 
    $("#DocumentUploadForm").submit(function(data) { 
     data.preventDefault; 

     var submittingForm = $("#DocumentUploadForm"); 
     var frameName = ("Upload"); 
     var uploadFrame = $("<iframe name=\"" + frameName + "\" />"); 

     uploadFrame.css("display", "none"); 


     $(".document_upload_progress").dialog({ 
      autoOpen: true, 
      bgiframe: true, 
      resizable: false, 
      height: 150, 
      width: 350, 
      modal: true, 
      overlay: { 
       backgroundColor: '#000', 
       opacity: 0.5 
      }, 
      open: function() { 
       $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove(); 
      }, 
      close: function() { 
       $(".document_upload_progress").dialog("destroy"); 
      } 
     }); 


     uploadFrame.load(function(data) { 
      //submit complete 
      setTimeout(function() { uploadFrame.remove(); }, 100); 
      $('#document_upload_dialog').dialog('close'); 
     }); 

     $("body:first").append(uploadFrame); 

     //setup complete 
     submittingForm.attr("target", frameName); 
    }); 
}); 

hth

Answer 3

Tôi đoán khung hình của bạn không bao giờ bị gắn vào DOM trong IE. Atleast nếu HTML bạn đã đăng hoàn tất. Vì nó không chứa bất kỳ div nào có id = fileUploadDiv

Bạn có thể xác nhận điều này bằng cách thêm iframe có chiều rộng và chiều cao khác 0 và đặt src thành URL chính xác.

Answer 4

Cảm ơn mọi người.

Tôi hiện sử dụng tập lệnh từ http://www.uploadify.com.

lớn kịch bản với rất nhiều chức năng tùy biến ...

Answer 5

tôi đã làm thay đổi này tại dòng 10:

và nó làm việc

if(window.ActiveXObject) { 
       var io; 


       try 
       { 
        //Your JavaScript code will be here, routine JavaScript statements area. 
        io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 
       } 
       catch(err) 
       { 
        //JavaScript Errors handling code will be here 
        io=document.createElement("iframe"); 
        io.setAttribute("id",frameId); 
        io.setAttribute("name",frameId); 
       } 

Answer 6

Tôi đang làm một điều rất giống nhau, tôi đã có vấn đề mà chỉ cần IE8 đã không tải lên các tập tin vào máy chủ của tôi; có một IniSizeError.

Giải pháp của tôi đã được bổ sung thêm dòng này:

form.encoding = "multipart/form-data"; 

mẫu của tôi khi tạo ra. Thuộc tính loại mã cũng được yêu cầu.