Как я могу * заставить * это изображение обновить после загрузки

Question

Я разрешаю административному персоналу на веб-сайте ASP.NET загружать свои фотографии для показа пользователям сайта. Это не сложно: просто используйте основные элементы управления загрузкой файлов:

<img src="<%#ImageFile%>" border='0' width="150" alt="" height="150" /> <-- Displays the image
<br />
<br />
Upload Picture: <input id="myFile" type="file" name="myFile" runat="server" size="60" />&nbsp;&nbsp;
<asp:button id="DoFileUploadBtn" Height="24" runat="server" Text="Upload" onclick="DoFileUploadBtn_Click"></asp:button>

Изображение названо с использованием идентификатора сотрудника плюс ".jpg". Таким образом, результирующее изображение для персонала с идентификатором 1 составляет 1.jpg. Это отображается с помощью тега выше.

При первой загрузке изображения оно работает нормально. Однако, если они меняют изображение, то старое удаляется, файл загружается правильно и страница обновляется. Тем не менее, браузер по-прежнему показывает старое изображение. Мне нужно вручную нажать кнопку refresh в браузере, чтобы отобразить новое изображение, поскольку, очевидно, браузер считает, что изображение имя "1.jpg" на этой конкретной странице должно быть тем, которое он сохранил.

I do использовать тег OutputCache с NoStore и Duration = "1", чтобы (пытаться) гарантировать, что ничего на странице не кэшируется, но безрезультатно:

<%@ OutputCache NoStore="true" Duration="1" VaryByParam="none" Location="none" %>

Таким образом, вопрос: что мне нужно сделать, чтобы обеспечить отображение нового изображения в этом сценарии? Я не хочу переименовывать изображения! Существует несколько мест, в которых изображение будет названо по имени сотрудника.

Answer 1

Самый простой и надежный способ - добавить строку запроса к URL-адресу атрибута src, который содержит номер версии.Вы можете использовать кодировку даты / времени, когда изображение было загружено, или дату / время последнего изменения файла изображения в файловой системе.

Так что атрибут будет выглядеть примерно так:

src="<%#ImageFile%>?v=<%#ImageFileLastChangedDateTime%>"