0

在我的网站中，我实现了部分 CMS。用户将能够完成的功能之一是上传各种文件以链接到他们认为必要的任何页面。我System.IO在服务器端使用 AJAX 和 C#，让用户能够上传或删除给定目录中的文件。

除此之外，他们编辑时还可以实时预览页面。一切都很顺利，直到我尝试在已经路径到的文件被删除后刷新预览（使用 javascript）。

刚刚删除的文件的路径应该显示一个损坏的链接，但它仍然显示正确的图片（即使检查并手动刷新服务器端目录，表明它实际上不存在）。

我在这里看到了这个 SO 问题：Auto refresh file or directory in WebApplication但它似乎不一定适用于我的情况（否则为什么在添加图片而不是删除图片时我不会遇到问题）？

我花了几个小时检查我的 JavaScript/jQuery 以确保我没有忽略任何东西，但是当涉及到刷新时，所有这些都通过一个函数进行引导，因此它应该一直工作或一直中断，而不是一个或另一个有时。

图片是否仍然存在于客户端某处，即使从服务器端删除后？（同样，标签的src属性img指向一个已用 C# 删除的文件File.Delete(Server.MapPath("~/CMS Files/" + location + "/" + file));

Ajax 函数：

function deleteFile(event) {
    var fileToDelete = event.parent().find(".fileDiv").text();
    var fileLocation = $("input#pageLocation").val();

    var confirmation = confirm("Are you sure you want to permanently delete the file, \"" + fileToDelete + "\" from the \"" + fileLocation + "\" File Box?");

    if (confirmation) {
        $.ajax({
            url: "/AJAX Pages/Compute_Delete_File.cshtml",
            async: false,
            type: "POST",
            data: { location: fileLocation, file: fileToDelete },
            success: function (response) {
                refreshFileBoxes(); //<--Self made function that refreshes the boxes (again, using AJAX) that collect what files are in the directory. Funny that this part always reflects correctly, the existing files in the server-side directory.
                alert(response);
                updatePreview(); //<--This function recollects all the page data in an array of objects, and refreshes the preview accordingly.
            },
            error: function (jqXHR, textStatus, error) {
                alert("Oops! It appears there has been an AJAX error. You may need to refresh the page. Please save your work and refresh the page to see all files in the File Box.");
            }
        });
    }
}

Ajax 函数指向的服务器端代码：

@{
    Layout = "";

    if (IsAjax)
    {
        var file = Request.Form["file"];
        var location = Request.Form["location"];

        File.Delete(Server.MapPath("~/CMS Files/" + location + "/" + file));

@:The file "@file" has been deleted.
    }
    else
    {
        Context.RedirectLocal("~/");
    }
}

用于预览的 HTML

<div class="editPreview">
    <div id="Library" class="contentWrapper">
        <hr/>
        <p class="pageTitle">Library</p>
        <hr/>
        <div class="contentImageWrapper" sytle="max-width: 375px;">
            <img class="contentImgMedium" src="/CMS Files/Library/Okmulgee_Library.jpg" title="Okmulgee_Library.jpg" alt="Okmulgee_Library.jpg" />
        </div>
        <p class="contentParagraph" style=" text-align: center;">For more information about the Okmulgee Public Library, call (918)-756-1448.</p>
        <br/>
        <span class="contentText">Or visit their website at&nbsp;</span>
        <a class="contentLink" href="http://www.fakewebaddress.com" target="_blank">http://www.fakewebaddress.com</a>&nbsp;
        <br/>
        <hr/>
    </div>
</div>

你可能需要知道的事情：

我在一个 C#.net 网页环境（w/WebMatrix）中，我愿意提供更多所需的代码，但是所有文件路径的性质使得 jsfiddle 不可能，恐怕。

4

1 回答 1

2

浏览器可能正在从浏览器缓存加载文件并显示它，即使它不再存在于服务器上。

如果您希望它从当前页面中的显示中删除，您可以从当前页面中删除该对象而不会出现此问题。

现在，您已经添加了 HTML，如果您想确保图像显示为损坏，您可以将<img>标签上的 src 更改为不存在的内容：

$("#Library .contentImagbeWrapper img").attr({
    src: "bustedimg.jpg",
    title: "missing image",
    alt: "missing image"
});

如果您想bustedimg.jpg成为真实的图像，这是您的选择。它可能是您自己的损坏图像应该是什么样子的版本，或者它可能会丢失，并且浏览器会为损坏的图像执行任何操作（某些浏览器不显示任何内容）。

于 2013-10-21T20:21:29.583 回答