ASP.NET: Fileupload имя файла исчезло после предварительного изображения

1

Я занимаюсь регистрацией сотрудников, если есть изображение, которое пользователь может просмотреть на выбранном ими изображении. Поэтому моя проблема заключается в том, что когда я пытался просмотреть выбранный образ, имя файла в файловой загрузке пропало.

Изображение 174551

"save-14-copy.png" - это имя файла.

Итак, следующий шаг - предварительный просмотр изображения.

Изображение 174551

Таким образом, вы можете увидеть, что "save-14-copy.png" уже исчез после нажатия кнопки предварительного просмотра.

Как сохранить имя файла, чтобы я не получил ошибку при ее сохранении?

Код для дизайна:

<asp:Button runat="server" ID="Button1"  Text="PREVIEW"  CssClass="button-green" OnClick="Button1_Click"/>

Javascript:

<script type="text/javascript">
function ImagePreview(Imagepath) {
    if (Imagepath.files && Imagepath.files[0]) {
        var Filerdr = new FileReader();
        Filerdr.onload = function (e) {
            document.getElementById("<%= hfImage.ClientID %>").value = e.target.result; 
        }
        Filerdr.readAsDataURL(Imagepath.files[0]);
    }
}
</script>

Codebehind:

protected void Button1_Click(object sender, EventArgs e)
{
  EmpImage.ImageUrl = hfImage.Value;
}
  • 1
    Кнопка предварительного просмотра выглядит так, как если бы она вызывала обратную передачу и отправляла файл на сервер; после обратной отправки у вас есть свежая перезагруженная страница, поэтому файл больше не выбирается. Я не вижу, как JS, который вы опубликовали, будет работать, если у вас нет другого кода, связывающего его с событием нажатия кнопки.
  • 0
    @BenRobinson.... Понятно .. Я протестировал его, обновил страницу, но текст в моем текстовом поле все еще там .. Как я могу это исправить?>
Показать ещё 2 комментария
Теги:
file-upload

2 ответа

1

Кнопка "Предварительный просмотр" на самом деле вызывает сообщение на сервере. Теперь, как вы его настроили, кнопка предварительного просмотра будет более точно названа Upload.

Вы используете объект FileReader, чтобы читать файл из локальной файловой системы пользователя и показывать его на изображении перед загрузкой. Все это должно происходить только в клиенте. Как только пользователь доволен выбранным изображением, он может загрузить изображение на сервер.

Вот очень простой пример, который должен вас начать.

.aspx файл

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="preview" runat="server" ImageUrl="~/Images/NotSelectedYet.jpg" />
        <br />
        <asp:FileUpload ID="pictureOfMe" runat="server" /> 
        <input type="button" value="Preview" onclick="Preview();" />
        <br />
        <asp:Button ID="Upload" runat="server" Text="Upload file to server" OnClick="Upload_Clicked" />
    </div>
    </form>
    <script type="text/javascript">
        function Preview() {
            var fileInput = document.getElementById('<%= pictureOfMe.ClientID  %>');
            var filePreview = document.getElementById('<%= preview.ClientID %>');
            var file = fileInput.files[0];
            var imageType = /image.*/;

            if (file.type.match(imageType)) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    filePreview.src = reader.result;
                }

                reader.readAsDataURL(file);
            }
            else {
                alert('Not an image file!');
            }
        }
    </script>
</body>

Здесь мы имеем изображение, показывающее изображение по умолчанию при первой загрузке. Затем у нас есть элемент управления загрузкой файлов, который позволяет пользователю выбрать изображение для загрузки. И у нас есть кнопка ввода html, которую пользователь нажимает для предварительного просмотра выбранного изображения. Когда эта кнопка нажата, она запускает код javascript, который использует FileReader для загрузки файла, показывающего его на изображении. Обратите внимание, что кнопка предварительного просмотра не приведет к возврату сообщения на сервер.

У нас также есть кнопка сервера, которая будет размещать страницу (включая выбранную картинку) на сервере с объявленным обработчиком событий сервера.

Файл.aspx.cs

public partial class TestImagePreviewAndUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Upload_Clicked(object sender, EventArgs e)
    {
        if(pictureOfMe.PostedFile.FileName != string.Empty) {
            byte[] uploadedBytes = pictureOfMe.FileBytes;
            //save uploaded picture here
        }
    }
}

Здесь, в методе Upload_Clicked мы проверяем, был ли файл загружен и получает содержимое файла в виде byte[]. Сохранение файла в соответствии с законом остается в виде упражнения...

Примечание. Пример javascript (с некоторыми изменениями) отсюда

Поделиться
1

я думаю, вы должны сохранить файл при предварительном просмотре и обработать имя файла там

protected void Button1_Click(object sender, EventArgs e)
{
  hfImagename.Value = fuFile.PostedFile.FileName;
  fuFile.PostedFile.SaveAs(@"C:\foo\"  +fuFile.PostedFile.FileName);
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню