sử dụng tải lên mượt mà với mvc 2 và jquery/ajax

Question

Tôi đang cố gắng tải lên nhanh chóng hoạt động bên trong hộp thoại jquery ui. Tôi đã có nó tải lên các tập tin tốt, và tôi đã kiểm tra các mẫu, và tất cả họ kết thúc với toàn bộ trang lại tải. Tôi đã quản lý để làm cho nó không làm bài đăng cuối cùng để xử lý các tệp sau khi tải lên bằng cách đặt AutoPostBackAfterUpload="false"

để bây giờ đặt các tệp trên máy chủ, với tên hướng dẫn ngẫu nhiên. và nó có được của một phản ứng trông như thế này:

{ 
state : "Complete", 
reason : "NotTerminated", 
percentComplete : 100.00, 
percentCompleteText : "100.00 %", 
contentLengthText : "826 KB", 
transferredLengthText : "826 KB", 
remainingLengthText : "0 bytes", 
currentFileName : "Desert.jpg", 
currentFileIndex : "1", 
timeElapsedText : "1 second", 
timeElapsedShortText : "00:01", 
timeRemainingText : "", 
timeRemainingShortText : "00:00",speedText : "596 KB/sec" 
} 

vì vậy những gì tôi cần biết là: làm thế nào để tôi ajaxly đăng những gì upload trơn không tự động khi bạn có AutoPostBackAfterUpload thiết lập là true.

đây là mã của tôi: <% Html.BeginForm ("OrganizationMemberEditContactSectionChangePhoto", "OrganizationMember", FormMethod.Post, New Với {.id = "uploadForm", .enctype = "multipart/form-data"})% >

<kw:SlickUpload ID="SlickUpload1" runat="server" AutoPostBackAfterUpload="false" UploadFormId="uploadForm" ShowDuringUploadElements="cancelButton" HideDuringUploadElements="uploadButton" MaxFiles="1" AutoUploadOnPostBack="false" ProgressInterval="200"> 
     <DownlevelSelectorTemplate> 
      <input type="file" /> 
     </DownlevelSelectorTemplate> 
     <UplevelSelectorTemplate> 
      <input type="button" value="Add File" /> 
     </UplevelSelectorTemplate> 
     <FileTemplate> 
      <kw:FileListRemoveLink runat="server">[x] remove</kw:FileListRemoveLink> 
      <kw:FileListFileName runat="server" /> 
      <kw:FileListValidationMessage runat="server" ForeColor="Red" /> 
     </FileTemplate> 
     <ProgressTemplate> 
      <table width="99%"> 
       <tr> 
        <td> 
         Uploading <kw:UploadProgressElement ID="UploadProgressElement1" runat="server" Element="FileCountText" />, 
         <kw:UploadProgressElement ID="UploadProgressElement2" runat="server" Element="ContentLengthText">(calculating)</kw:UploadProgressElement>. 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Currently uploading: 
         <kw:UploadProgressElement ID="UploadProgressElement3" runat="server" Element="CurrentFileName" />, 
         file <kw:UploadProgressElement ID="UploadProgressElement4" runat="server" Element="CurrentFileIndex">&nbsp;</kw:UploadProgressElement> 
         of 
         <kw:UploadProgressElement ID="UploadProgressElement5" runat="server" Element="FileCount" />. 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Speed: 
         <kw:UploadProgressElement ID="UploadProgressElement6" runat="server" Element="SpeedText">(calculating)</kw:UploadProgressElement>. 
        </td> 
       </tr> 
       <tr> 
        <td> 
         About 
         <kw:UploadProgressElement ID="UploadProgressElement7" runat="server" Element="TimeRemainingText">(calculating)</kw:UploadProgressElement> remaining. 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div style="border: 1px solid #008800; height: 1.5em; position: relative"> 
          <kw:UploadProgressBarElement ID="UploadProgressBarElement1" runat="server" Style="background-color: #00ee00; width: 0; height: 1.5em" /> 
          <div style="text-align: center; position: absolute; top: .15em; width: 100%"> 
           <kw:UploadProgressElement ID="UploadProgressElement8" runat="server" Element="PercentCompleteText">(calculating)</kw:UploadProgressElement> 
          </div> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </ProgressTemplate> 
    </kw:SlickUpload> 
    <p> 
     <input type="button" value="Upload" id="uploadButton" /> 
     <a href="javascript:kw.get('<%=SlickUpload1.ClientID %>').cancel()" id="cancelButton" style="display:none">Cancel</a> 
    </p>    
<%Html.EndForm()%> 
<script type="text/javascript"> 
    var theThing; 
    var urlToPost = "theUrlThatHandlesThePostBack"; 
    function v2SetUpPhotoDialog() { 

     theThing = kw.get("<%=SlickUpload1.ClientID %>"); 
     theThing.add_OnUploadEnded(function (status) { 
      var data = $('#uploadForm').serialize(); 
      $.ajax({ 
       type: 'POST', 
       url: urlToPost, 
       data: data, 
       success: function() { 
        v2RegularNotice('success'); 
       }, 
       error: function() { 
        v2RegularNotice('fail'); 
       } 
      }); 
     }); 

     $('#uploadButton').live('click', function() { 
      theThing = kw.get("<%=SlickUpload1.ClientID %>"); 
      theThing.submit(); 
      return false; 
      // kw.get("<%=SlickUpload1.ClientID %>").submit(); 
     }); 
    } 
</script> 

như bạn có thể nhìn thấy, tôi đã cố gắng có OnUploadEnded mất tư cách như một tham số, nhưng nó không điền nó với bất kỳ thông tin hữu ích mà các thông số trạng thái cho các hành động cần. Nó hiện đang tuần tự hóa biểu mẫu và gửi nó, nhưng nó chỉ điền 1 trường. kw_uploadId.

hoạt động của bộ điều khiển không thực hiện bất kỳ điều gì, nó chỉ cố gắng lấy một Tải lênStream như một tham số. nhưng nó trống nếu tôi chỉ cần tuần tự hóa biểu mẫu.

Tôi chắc chắn rằng tôi đang thiếu điều gì đó hiển nhiên. nhưng tôi không thể hiểu được. Tôi đang tìm loại tài liệu khó theo dõi và không hữu ích trong trường hợp này.

cảm ơn!

Answer 1

Sau khi làm việc với Patrica, vấn đề này đã được giải quyết.Chúng tôi gặp phải một số vấn đề cơ bản như sau:

Điều chính tại nơi làm việc ở đây là hạn chế trong thiết kế của SlickUpload: bạn không thể xóa điều khiển SlickUpload khỏi DOM khi nó được thêm vào và sau đó thêm lại nó lại sau. Điều này sẽ được giải quyết trong SlickUpload6, nhưng tiếc là một hạn chế với phiên bản hiện tại. Để giải quyết vấn đề này, chúng tôi đã giấu điều khiển khi tab hoặc hộp thoại ẩn, thay vì thực sự xóa nó.

Ngoài ra còn có bản phát hành phiên bản nhỏ SlickUpload (5.5.9) bổ sung phương thức get_UploadId(), để làm cho ID tải lên cho tải lên hiện tại dễ dàng hơn.

Mã này (từ trên cao):

kw_uploadId: document.getElementById("kw_uploadId").value, 

trở thành:

kw_uploadId: theThing.get_UploadId(), 

Bạn có thể nhận được phiên bản mới nhất tại đây: SlickUpload 5.5.9

Answer 2

Tôi ghét iframe, nhưng tôi nghĩ đó là tuyến đường dễ nhất để đến đây.

Ngoài ra, bạn có thể sử dụng jQuery dạng Plugin http://malsup.com/jquery/form/

$('#YOURFORM').ajaxForm({target:'#YOURFORM'}); //replace form with result HTML 

Answer 3

Vâng, Nó đã thực sự đơn giản hơn nhiều sau đó tôi mong đợi. đây là những gì tôi đã có và nó hoạt động:

function v2SetUpPhotoDialog() { 

     theThing = kw.get("<%=SlickUpload1.ClientID %>"); 
     theThing.add_OnUploadEnded(function (data) { 
      var data = { 
       kw_uploadId: document.getElementById("kw_uploadId").value, 
       kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"), 
       id: $('#Id').val() 
      }; 

      $.ajax({ 
       type: 'POST', 
       url: urlToPost, 
       data: data, 
       success: function (result) { 
        alert(result.Message); 

       }, 
       error: function() { 
        v2RegularNotice('fail'); 
       } 
      }); 
     }); 

     $('#uploadButton').live('click', function() { 
      theThing = kw.get("<%=SlickUpload1.ClientID %>"); 
      v2RegularNotice('click me'); 
      theThing.submit(); 

     }); 
    } 

này kết hợp với các tùy chỉnh mô hình binder tìm thấy ở đây: http: //krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net -mvc-uploadstatus-điều khiển-action-method.aspx

cho phép bạn có một hành động điều khiển như thế này:

public function ChangePhoto(byval status as UploadStatus, byval id as integer) as actionresult 

và tình trạng được phổ biến đúng cách.

nên về cơ bản, nó chỉ cần có:

kw_uploadExecution: (data.isSuccessful ? "Attempted" : "Cancelled"), 

rằng phần bổ sung.

hỗ trợ chủ đề có thể được tìm thấy ở đây: http://krystalware.com/forums/yaf_postsm5128_aspnet-mvc-ajax-upload-without-update-panel.aspx#post5128