Предварительный просмотр Перед загрузкой файла

Question

У меня проблема при загрузке файла. Я создал aspx-файл в asp.net, затем добавил элемент управления загрузкой и контролем изображения. Я хочу показать изображение предварительного просмотра в управлении изображением перед загрузкой. Я создал следующий скрипт.

<img id="Image" src="" alt="" /> 
      <br /> 
<asp:FileUpload ID="Upload" runat="server" onchange="document.getElementById('Image').src = 'file:///' + this.value;alert('file:///' + this.value);" /> 

Это не работа в каждом браузере. Как я мог это сделать?

Answer 1

Вы также можете использовать модальный PopUp AJAX Control Toolkit Это пример по контролю FileUpload. С небольшим количеством настроек вы можете изменить его в соответствии с вашими потребностями.

Answer 2

Вы не можете, по соображениям безопасности, полный путь к файлу не будет доступен для вашего скрипта (если это так, вам придется выполнять преобразования на нем, чтобы использовать его как URL-адрес).

В некоторых современных браузерах вы можете использовать новый File API, чтобы действительно прочитать данные изображения и показать их на странице. Я ранее писал another answer здесь, на SO показывает, как это сделать (в этом случае мы можем найти размеры изображения).

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

Answer 3

Если вы используете MVC, вы можете попробовать этот подход ниже. Он также использовать кнопку для загрузки изображения:

Модель:

[Display(Name = "Photo")] 
public byte[] ImageData { get; set; } 

[HiddenInput(DisplayValue = false)] 
public string ImageMimeType { get; set; } 

Вид:

<div> 
    @if (Model.ImageData == null) 
    { 
     <img id="myImage" class="photo" src="@Url.Content("~/Content/images/no_photo.png")" /> 
    } 
    else 
    { 
     <img id="myImage" class="photo" src="@Url.Action("GetImage", "YourController", new { Model.ID })" /> 
    } 
     <label for="myInput" class="custom-file-upload"></label> 
     <input type='file' id="myInput" name="image" /> 
</div> 

<script> 
    //Preview & Update an image before it is uploaded 
    function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#myImage').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
     } 
    } 
    $("#myInput").change(function() { 
     readURL(this); 
    }); 
</script> 

Css:

/*For photo/image upload operations */ 
input[type="file"] { 
    display: none; 
} 

.custom-file-upload { 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 

    display: inline-block; 
    padding: 6px 12px; 
    cursor: pointer; 
    float: right; 
    width: 5.25em; 
    margin-left:200px; 
} 

.photo{ 
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 
    float:right; 
} 

    <br/> 

Контроллер:

public FileContentResult GetImage(int id) 
{ 
    var dataContext = repository.Participants.FirstOrDefault(p => p.ID == id); 
    if (dataContext != null) 
    { 
     return File(dataContext.ImageData, dataContext.ImageMimeType); 
    } 
    else 
    { 
     return null; 
    } 
} 

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Edit([Bind(Exclude = null)] Student student, HttpPostedFileBase image) 
{ 
    try 
    { 
     if (ModelState.IsValid) 
      {      
       if (image != null) 
       { 
        student.ImageMimeType = image.ContentType; 
        student.ImageData = new byte[image.ContentLength]; 
        image.InputStream.Read(participant.ImageData, 0, image.ContentLength); 
       } 

       repository.SaveStudent(student); 
………