在上传文件之前预览图像

Question

通过上传文件我遇到了一个问题。我在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);" />

在每个浏览器中都不起作用。我怎么能这样做？

Answer 1

出于安全原因，您不能将文件的完整路径提供给您的脚本（如果是，您必须对其执行转换以将其用作URL）。

在某些现代浏览器中，您可以使用新的File API实际读取图像数据并在页面上显示。我之前在这里写过another answer来说明如何做到这一点（在这种情况下，我们可以找到图像尺寸）。

但除此之外，你必须假设用户有一种方法可以看到他们所选择的图像，除了你的网页。

Answer 2

您也可以使用Modal PopUp AJAX Control Toolkit这是关于fileupload控件的示例。只需很少的调整，您就可以根据需要对其进行修改。

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);
………

Answer 4

    <link href="css/css.css" rel="stylesheet" type="text/css">
<SCRIPT language=javascript src="js/AutoChangePhoto.js"></SCRIPT>
<DIV class=fpic>
<A id=foclnk href="http://www.sharejs.com" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="images/01.jpg" width=400></A> 
<DIV id=fttltxt 
style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A 
href="http://www.sharejs.com" target=_blank>梦：牧场小屋</A></DIV>
<DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">
<DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG 
src="images/01.jpg" alt="" width=56 height=42 border="0"></A></DIV>
<DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/02.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/03.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/04.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/05.jpg" width=56></A></DIV>
<DIV class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><A 
href="http://www.sharejs.com" target=_blank><IMG height=45 alt=""
src="images/06.jpg" width=56></A></DIV>
<SCRIPT language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "images/01.jpg";
lnkarry[0]  = "http://www.sharejs.com";
ttlarry[0] = "梦：牧场小屋";
picarry[1] = "images/02.jpg";
lnkarry[1]  = "http://www.sharejs.com";
ttlarry[1] = "碎玉：回眸";
picarry[2] = "images/03.jpg";
lnkarry[2]  = "http://www.sharejs.com";
ttlarry[2] = "飞狐：豆花档";
picarry[3] = "images/04.jpg";
lnkarry[3]  = "http://www.sharejs.com";
ttlarry[3] = "牛说不哭：烈日下的建筑工人";
picarry[4] = "images/05.jpg";
lnkarry[4]  = "http://www.sharejs.com";
ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";
picarry[5] = "images/06.jpg";
lnkarry[5]  = "http://www.sharejs.com";
ttlarry[5] = "松间明月：汽车文化";
</SCRIPT>
</DIV></DIV>`enter code here`