上傳文件之前的預覽圖片

上傳文件導致了一個問題。我在asp.net中創建了一個aspx文件，然後我添加了一個fileupload控件和圖像控件。我想在上傳之前在圖像控制中顯示預覽圖像。我創建了一個下面的腳本。上傳文件之前的預覽圖片

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

這不適用於每個瀏覽器。我怎麼能這樣做？

來源

2012-02-01 zanhtet

請給我一個理由，爲什麼你給我否決？ – zanhtet 2012-02-01 08:49:29

你也可以使用Modal PopUp AJAX Control Toolkit這是一個fileupload控制的例子。幾乎沒有什麼調整，你可以修改它以適應你的需要。

來源

2012-02-01 09:38:49 rofans91

出於安全原因，您的腳本無法使用文件的完整路徑（如果是這樣，您必須對其執行轉換才能將其用作URL）。

在一些現代瀏覽器上，您可以使用新的File API實際讀取圖像數據並將其顯示在頁面上。我之前在SO上寫過another answer，說明如何做到這一點（在這種情況下，我們可以找到圖像尺寸）。

但除此之外，你必須假設用戶有一種方法來查看他們選擇的圖像，除了你的網頁。

來源

2012-02-01 08:23:46

我在一個月前問過同樣的問題，但發現沒有正確的解決方案。我會試試這個。 – Mubarek 2012-02-01 08:31:00

如果您使用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); 
………

來源

2015-03-13 15:28:21

上傳文件之前的預覽圖片

回答

相關問題