代码之家  ›  专栏  ›  技术社区  ›  Patricia

在mvc 2和jquery/ajax中使用slick upload

  •  7
  • Patricia  · 技术社区  · 14 年前

    AutoPostBackAfterUpload="false"

    所以它现在将文件放在服务器上,并使用随机的guid名称。得到的反应是这样的:

    {
    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"
    }
    

    这是我的代码: <%Html.BeginForm(“OrganizationMemberEditContactSectionChangePhoto”,“OrganizationMember”,FormMethod.Post,New With{.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>
    

    如您所见,我尝试让onuploaded将status作为一个参数,但它没有向它填充status参数所需的任何有用信息。它当前序列化表单并发送该表单,但它只填充1个字段。kw_上传id。

    控制器操作还没有做任何事情,它只是尝试将UploadStatus作为参数。但如果我只是序列化表单,它是空的。

    我肯定我漏掉了一些显而易见的东西。但我想不通。我发现文档很难遵循,在这种情况下没有帮助。

    谢谢!

    3 回复  |  直到 14 年前
        1
  •  2
  •   Chris Hynes    14 年前

    与帕特里卡合作后,这个问题得到了解决。我们又遇到了几个障碍,但基本情况如下:

    这里的主要工作是SlickUpload设计中的一个限制:一旦添加了SlickUpload控件,就不能将其从DOM中删除,然后再重新读取它。这将在SlickUpload6中解决,但不幸的是,这是当前版本的一个限制。为了解决这个问题,我们在选项卡或对话框不可见时隐藏了控件,而不是实际删除它。

    此代码(从上开始):

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

    变成:

    kw_uploadId: theThing.get_UploadId(),
    

    您可以在此处获取最新版本: SlickUpload 5.5.9

        2
  •  0
  •   troynt    14 年前

    我讨厌iframes,但我认为这是最简单的路线。

    http://malsup.com/jquery/form/

    $('#YOURFORM').ajaxForm({target:'#YOURFORM'}); //replace form with result HTML
    
        3
  •  0
  •   Patricia    14 年前

    其实比我想象的要简单得多。这是我所拥有的,而且有效:

     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();
    
            });
        }
    

    允许您执行如下控制器操作:

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

    状态已正确填充。

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

    那部分补充道。

    http://krystalware.com/forums/yaf_postsm5128_aspnet-mvc-ajax-upload-without-update-panel.aspx#post5128