想做个图片上传前预览的功能

Question

上传的功能已经实现，现在就想让FileUpload选取图片后，显示图片的预览出来。分不是问题
前台代码：<%@ Page Language="C#" MasterPageFile="~/index.master" AutoEventWireup="true" CodeFile="class_photos_upload.aspx.cs" Inherits="class_photos_upload" Title="班级相片上传" Theme="MSN_Blue" StylesheetTheme="MSN_Blue" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 446px; border-right: inactivecaptiontext 1px solid; border-top: inactivecaptiontext 1px solid; border-left: inactivecaptiontext 1px solid; border-bottom: inactivecaptiontext 1px solid;">
        <tr>
            <td align="left" style="background-color: inactivecaption;" valign="top" colspan="2">
                上传照片</td>
        </tr>
        <tr>
            <td align="left" style="width: 62px; height: 16px" valign="top">
            </td>
            <td align="left" style="width: 349px; height: 16px" valign="top">
                <asp:Image ID="Image1" runat="server" BorderColor="CornflowerBlue" BorderStyle="Solid" BorderWidth="1px"
                    Height="150px" Width="150px" /></td>
        </tr>
        <tr>
            <td align="left" style="width: 62px" valign="top">
            </td>
            <td align="left" style="width: 349px" valign="top">
                <asp:FileUpload ID="FileUpload1" runat="server" Width="312px" /></td>
        </tr>
        <tr>
            <td align="left" style="width: 62px" valign="top">
                相片标题</td>
            <td align="left" style="width: 349px" valign="top">
                <asp:TextBox ID="ptitleTextBox1" runat="server" Width="305px"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="left" style="width: 62px" valign="top">
                相片说明</td>
            <td align="left" style="width: 349px" valign="top">
                <asp:TextBox ID="pinfoTextBox1" runat="server" Rows="5" TextMode="MultiLine" Width="305px"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="left" style="width: 62px" valign="top">
            </td>
            <td align="left" style="width: 349px" valign="top">
                <asp:Button ID="Button1" runat="server" Font-Bold="True" ForeColor="Black" OnClick="Button1_Click"
                    Text="上　　传" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button2" runat="server" PostBackUrl="~/photolist.aspx"
                        Text="返回相册" /></td>
        </tr>
        <tr>
            <td align="left" style="width: 62px" valign="top">
            </td>
            <td align="left" style="width: 349px" valign="top">
                <asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label></td>
        </tr>
    </table>
    &nbsp;<div id="preview" align="center"></div>
</asp:Content>
后台代码：using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.IO;
public partial class class_photos_upload : System.Web.UI.Page
{
    dbClass db = new dbClass();    protected void Page_Load(object sender, EventArgs e)
    {        if (Session["username"] == null)
        {
            Session["comebackUrl"] = Request.Path;//保存当前网页URL,以便在登录后返回
            Response.Write("<script>alert('请登录后再操作！');location='index.aspx';</script>");        }
        if (!IsPostBack)
        {
            Label1.Text = "";
            Image1.ImageUrl = "";
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string ptitle = "无题";
        if (!string.IsNullOrEmpty(ptitleTextBox1.Text.Trim()))
            ptitle = string_replace(ptitleTextBox1.Text.Trim());
        string pinfo = "班级相片";
        if (!string.IsNullOrEmpty(pinfoTextBox1.Text.Trim()))
            pinfo = string_replace(pinfoTextBox1.Text.Trim());
        //处理上传的图片
        bool filesVolid1 = false;//
        if (FileUpload1.HasFile)//
        {
            string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();//上传文件的后缀
            string[] setsExtension ={ ".jpg", ".bmp", ".gif", ".png" };//规定上传的图片文件类型
            for (int i = 0; i < setsExtension.Length; i++)
            {
                if (fileExtension == setsExtension[i])
                {
                    filesVolid1 = true;
                    break;
                }
            }            if (filesVolid1)//
            {                try
                {                    string newfilename1 = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + fileExtension;
                    string filepath = Server.MapPath("~/images/class_photos/") + newfilename1;//上传图片保存在服务器上“物理路径”
                    string filepath_in_database = Request.ApplicationPath + "/" + "images/class_photos/" + newfilename1;//上传图片存贮在数据表中路径数据(以站点根目录为起点)                    
                    FileUpload1.SaveAs(filepath);
                   
                    Image1.ImageUrl = filepath_in_database;                    string sqlstr1 = "insert into class_photos(path,ptitle,pinfo,puploader,pdate)values('" + filepath_in_database + "','"+ptitle+"','"+pinfo+"','"+Session["username"].ToString()+"','"+DateTime.Now.ToString()+ "')";
                    //Response.Write(sqlstr1);
                   // Response.End();
                    int ok = db.sqlEx(sqlstr1);//添加新相片的数据到数据库
                    Label1.Text = "";
                    ptitleTextBox1.Text = "";
                    pinfoTextBox1.Text = "";                    Response.Write("<script>alert('文件上传成功!');location='class_photos_upload.aspx';</script>");
                }
                catch
                { //Label1.Text="文件上传不成功！";
                    Response.Write("<script>alert('文件上传失败!')</script>");                }
            }
            else
            {
                //Label1.ForeColor = System.Drawing.Color.Red;
                Label1.Text = "只能上传后缀为.gif .jpg  .bmp .png的图片文件";
            }
        }
    }
    public string string_replace(string str)
    {
        str = str.Replace("&", "&amp;");
        str = str.Replace("<", "&lt;");
        str = str.Replace(">", "&gt;");
        str = str.Replace(Char.ConvertFromUtf32(13), "<br>");
        str = str.Replace(Char.ConvertFromUtf32(32), "&nbsp;");
        str = str.Replace(Char.ConvertFromUtf32(9), "&nbsp;&nbsp;&nbsp;&nbsp;");
        str = str.Replace(Char.ConvertFromUtf32(39), "&acute;");
        str = str.Replace(Char.ConvertFromUtf32(34), "&quot;");
        return str;
    }
}

Answer 1

把你放图片控件的imgURl指向上传之后的路径不就完了

Answer 2

如果用户选定了文件，预览的图片url可以马上修改为file:///c:/a.jpg这样的形式，这样就可以马上看到这张图片了。

Answer 3

拖个image控件，然后
if (FileUpload1.HasFile)//
{
image.ImageUrl = FileUpload1.FileName
...

Answer 4

你google得到结果的速度都比在这问得到结果的速度要快。

Answer 5

<script type="text/javascript"> 
var dFile = document.getElementById('<%=FileUpload1.ClientID %>');
var dImg = document.getElementById('<%=Image1.ClientID %>');
dFile.onchange = function(){
alert(dImg.src);
alert(dFile.value);
if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}
if(dFile.files){
dImg.src = dFile.files[0].getAsDataURL();
}else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){
alert(dImg.src);
alert(dFile.value);
dImg.src = dFile.value;
alert(dImg.src);
}
}
</script>把上面这段代码加到页面 </asp:Content> 前面~~

Answer 6

你可以参照
http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspxjs实现的预览，是不能兼容所有浏览器的，

Answer 7

你的代码准备只在IE下使用吗？你试过i8,ie9下的默认浏览器设置没有

Answer 8

porschev
 
(Vivi) 等　级： 
2
 #20楼 得分：30回复于：2011-06-01 09:04:46
看看这个
 
 
 没用