jquery - 在mvc 2和jquery/ajax中使用平滑上传

我正在尝试在jQuery用户界面对话框中进行平滑的上载。我已经很好地上传了文件，并且我已经 checkout 了样本，它们最终都重新加载了整个页面。我设法做到了，所以它不做它是最后的回发，通过设置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"
}

因此，我需要知道的是:当AutoPostBackAfterUpload设置为true时，如何自动发布光滑的上传内容。

这是我的代码:

    <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>

如您所见，我尝试让OnUploadEnded将状态作为参数，但是并没有用该操作的状态参数需要的任何有用信息来填充它。当前，它会序列化表格并将其发送，但仅填充1个字段。 kw_uploadId。

该 Controller 操作尚未执行任何操作，只是尝试将UploadStatus用作参数。但是如果我只是序列化表格，它是空的。

我确定我缺少明显的东西。但我不知道。我发现该文档很难遵循，并且在这种情况下无济于事。

谢谢!

最佳答案

与Patrica合作后，此问题已解决。我们遇到了另外几个障碍，但基本知识如下:

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

还有一个SlickUpload次要版本(5.5.9)，其中添加了get_UploadId()方法，以使获取当前上载的上载ID更容易。

这段代码(从上面):

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

变成:

kw_uploadId: theThing.get_UploadId(),

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

关于jquery - 在mvc 2和jquery/ajax中使用平滑上传，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3937250/