7

我正在尝试在 jquery ui 对话框中进行流畅的上传。我已经很好地上传了文件,并且我已经检查了示例,它们最终都会重新加载整个页面。我已经设法做到了,所以它不会在上传后通过设置文件来处理文件的最终回发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 时,我如何 ajaxly 发布平滑上传自动执行的操作。

这是我的代码:<% 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>

如您所见,我尝试让 OnUploadEnded 将状态作为参数,但它没有填充操作的状态参数所需的任何有用信息。它当前序列化表单并发送它,但它只填充 1 个字段。kw_uploadId。

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

我确定我遗漏了一些明显的东西。但我无法弄清楚。我发现文档有点难以理解,在这种情况下也没有帮助。

谢谢!

4

3 回答 3

2

与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

于 2010-12-01T20:31:26.383 回答
0

我讨厌 iframe,但我认为这是最简单的方法。

或者,您可以使用 jQuery 表单插件http://malsup.com/jquery/form/

$('#YOURFORM').ajaxForm({target:'#YOURFORM'}); //replace form with result HTML
于 2010-10-19T17:23:58.580 回答
0

嗯,它实际上比我预期的要简单得多。这就是我所拥有的并且它有效:

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

        });
    }

这与此处找到的自定义模型绑定器相结合:http://krystalware.com/blog/archive/2010/02/27/modelbinder-asp.net-mvc-uploadstatus-controller-action-method.aspx

让你有一个这样的控制器动作:

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

于 2010-10-25T18:59:54.170 回答