上传文件之前的预览图片

上传文件导致了一个问题。我在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

上传文件之前的预览图片

回答

相关问题