图片上传、预览、修改

<textarea cols="50" rows="15" name="code" class="c-sharp">//注:用fileUpload不能做刷新操作（就是不能用ajax之类的刷新）&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadCarPhoto.aspx.cs" Inherits="YC.SH.WEB.PictureCompare.UploadCarPhoto" %&gt;&lt;%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head id="Head1" runat="server"&gt; &lt;link href="../App_Themes/DefaultThemes/master.css" mce_href="App_Themes/DefaultThemes/master.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="../App_Themes/DefaultThemes/tanchunew.css" mce_href="App_Themes/DefaultThemes/tanchunew.css" rel="stylesheet" type="text/css" /&gt; &lt;mce:script src="../js/validate.js" mce_src="js/validate.js" type="text/javascript"&gt;&lt;/mce:script&gt; &lt;mce:script src="../js/calendars.js" mce_src="js/calendars.js" type="text/javascript"&gt;&lt;/mce:script&gt; &lt;title&gt;上传相片&lt;/title&gt; &lt;mce:script type="text/javascript" language="javascript"&gt;&lt;!-- //预览图片 function preview(fileUpload) { if (fileUpload.value.match(/.jpg|.gif|.png|.bmp/i)) { var fileValue = fileUpload.id; var file = fileValue.split('_'); var imageId = "img_" + file[1]; var image = document.getElementById(imageId); image.style.width = "189px"; image.style.height = "142px"; image.src = ""; image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"; //这句不写会报&lsquo;未标识的错误&rsquo; image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale"; //图片的大小显示 image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileUpload.value; //显示图片 } else { alert("图片格式无效！"); fileUpload.outerHTML = fileUpload.outerHTML; //清空fileUpload的文本域的值 } } //验证 function validateFileUpload() { var tb_photoTime = document.getElementById("tb_photoTime").value; var img_straightAhead = document.getElementById("img_straightAhead").src.split('carPhoto/'); var img_leftAnterior = document.getElementById("img_leftAnterior").src.split('carPhoto/'); var img_straightLeft = document.getElementById("img_straightLeft").src.split('carPhoto/'); var img_leftRear = document.getElementById("img_leftRear").src.split('carPhoto/'); var img_straightAstern = document.getElementById("img_straightAstern").src.split('carPhoto/'); var img_rightFront = document.getElementById("img_rightFront").src.split('carPhoto/'); var img_straightRight = document.getElementById("img_straightRight").src.split('carPhoto/'); var img_rightRear = document.getElementById("img_rightRear").src.split('carPhoto/'); var fu_straightAhead = document.getElementById("fu_straightAhead").value; var fu_leftAnterior = document.getElementById("fu_leftAnterior").value; var fu_straightLeft = document.getElementById("fu_straightLeft").value; var fu_leftRear = document.getElementById("fu_leftRear").value; var fu_straightAstern = document.getElementById("fu_straightAstern").value; var fu_rightFront = document.getElementById("fu_rightFront").value; var fu_straightRight = document.getElementById("fu_straightRight").value; var fu_rightRear = document.getElementById("fu_rightRear").value; if (checkValueIsEmpty(tb_photoTime)) { alert("请填写拍照时间！"); document.getElementById("tb_photoTime").focus(); return false; } if (img_straightAhead[1] == "tu1.jpg") { alert("请选择一张车的正前方向的图片！"); document.getElementById("fu_straightAhead").focus(); return false; } if (img_leftAnterior[1] == "tu2.jpg") { alert("请选择一张车的左前方向的图片！"); document.getElementById("fu_leftAnterior").focus(); return false; } if (img_straightLeft[1] == "tu3.jpg") { alert("请选择一张车的正左方向的图片！"); document.getElementById("fu_straightLeft").focus(); return false; } if (img_leftRear[1] == "tu4.jpg") { alert("请选择一张车的左后方向的图片！"); document.getElementById("fu_leftRear").focus(); return false; } if (img_straightAstern[1] == "tu5.jpg") { alert("请选择一张车的正后方向的图片！"); document.getElementById("fu_straightAstern").focus(); return false; } if (img_rightFront[1] == "tu6.jpg") { alert("请选择一张车的右前方向的图片！"); document.getElementById("fu_rightFront").focus(); return false; } if (img_straightRight[1] == "tu7.jpg") { alert("请选择一张车的正右方向的图片！"); document.getElementById("fu_straightRight").focus(); return false; } if (img_rightRear[1] == "tu8.jpg") { alert("请选择一张车的右后方向的图片！"); document.getElementById("fu_rightRear").focus(); return false; } return true; } //刷新页面并且关闭窗口 function execute() { var objUrl = String(window.opener.location); if (objUrl.indexOf("CarSearch.aspx") &gt; -1) { window.opener.btn_Serch(); } window.close(); } //回车键事件 function documentonkeydown() { if (event.keyCode == 13) { document.getElementById("btn_submitEdit").click(); //点击回车键调用button的点击事件 event.returnValue = false; //取消回车键的默认操作 } } // --&gt;&lt;/mce:script&gt;&lt;/head&gt;&lt;body onkeydown="documentonkeydown();"&gt; &lt;form id="form1" runat="server"&gt; &lt;asp:HiddenField ID="hf_carNumber" runat="server" /&gt; &lt;asp:HiddenField ID="hf_id" runat="server" /&gt; &lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" /&gt; &lt;div class="kuang"&gt; &lt;div class="toptt"&gt; &lt;h1&gt; 拍照时间：&lt;asp:TextBox ID="tb_photoTime" runat="server" onfocus="this.select();setday(this);" class="btnst" Width="123px" /&gt;&lt;/h1&gt; &lt;/div&gt; &lt;div class="toptt"&gt; &lt;h1&gt; 上传相片&lt;/h1&gt; &lt;/div&gt; &lt;table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"&gt; &lt;tr&gt; &lt;td align="left"&gt; &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_straightAhead" runat="server" ImageUrl="~/App_Themes/images/carPhoto/tu1.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_straightAhead" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_leftAnterior" ImageUrl="../App_Themes/images/carphoto/tu2.jpg" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_leftAnterior" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_straightLeft" runat="server" ImageUrl="../App_Themes/images/carphoto/tu3.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_straightLeft" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_leftRear" runat="server" ImageUrl="../App_Themes/images/carphoto/tu4.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_leftRear" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_straightAstern" runat="server" ImageUrl="../App_Themes/images/carphoto/tu5.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_straightAstern" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_rightFront" runat="server" ImageUrl="../App_Themes/images/carphoto/tu6.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_rightFront" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;td align="center"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_straightRight" runat="server" ImageUrl="../App_Themes/images/carphoto/tu7.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_straightRight" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;table width="189" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="142"&gt; &lt;asp:Image Width="189px" Height="142px" ID="img_rightRear" runat="server" ImageUrl="../App_Themes/images/carphoto/tu8.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="20"&gt; &nbsp; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;asp:FileUpload onchange="preview(this);" EnableViewState="true" ID="fu_rightRear" runat="server" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div class="xian"&gt; &lt;/div&gt; &lt;div class="tcanniu"&gt; &lt;asp:Button ID="btn_submitEdit" CssClass="phoneBySubmitEdit" runat="server" OnClick="btn_submitEdit_Click" OnClientClick="return validateFileUpload();" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt;&lt;/body&gt;&lt;/html&gt;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.IO;using YC.SH.DataAccess.PictureCompare;using YC.DB.DataSource;using YC.SH.Business.PictureCompare;//文件流namespace YC.SH.WEB.PictureCompare{ public partial class UploadCarPhoto : PageBase { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { hf_id.Value = Server.UrlDecode(Request.QueryString["id"]); if (string.IsNullOrEmpty(hf_id.Value)) { tb_photoTime.Attributes.Add("ReadOnly", "ReadOnly"); hf_carNumber.Value = Server.UrlDecode(Request.QueryString["carNumber"]); } else { showPhoto(); } } } /// &lt;summary&gt; /// 显示照片的信息 /// &lt;/summary&gt; private void showPhoto() { T_SHGPS_CARPHOTO carPhoto = LibBase.RecivedObj(T_SHGPS_CARPHOTO.DBNAME, typeof(T_SHGPS_CARPHOTO), hf_id.Value) as T_SHGPS_CARPHOTO; if (carPhoto != null) { hf_carNumber.Value = carPhoto.CARNUMBER; tb_photoTime.Text = carPhoto.CATCHPHOTOTIME.ToString(); tb_photoTime.Enabled = false; img_straightAhead.ImageUrl = carPhoto.FRONTAGEPHOTO; img_leftAnterior.ImageUrl = carPhoto.LFPHOTO; img_straightLeft.ImageUrl = carPhoto.LEFTWARDPHOTO; img_leftRear.ImageUrl = carPhoto.LBPHOTO; img_straightAstern.ImageUrl = carPhoto.BACKSIDEPHOTO; img_rightFront.ImageUrl = carPhoto.RFPHOTO; img_straightRight.ImageUrl = carPhoto.RIGHTPHOTO; img_rightRear.ImageUrl = carPhoto.RBPHOTO; } } /// &lt;summary&gt; /// 上传相片 /// &lt;/summary&gt; /// &lt;returns&gt;&lt;/returns&gt; private string uploadPhoto(FileUpload fileUp) { string filePath = string.Empty; if (fileUp.HasFile) { string filename; string houzhui = string.Empty; int indexer = fileUp.FileName.LastIndexOf('.'); houzhui = fileUp.FileName.Substring(indexer + 1); if (houzhui == "jpg" || houzhui == "JPG" || houzhui == "gif" || houzhui == "GIF") { filename = fileUp.FileName; filename = System.IO.Path.GetExtension(filename); //保存到服务器，b是绘制的位图 if (!Directory.Exists(Server.MapPath("carPhoto/"))) { Directory.CreateDirectory(Server.MapPath("carPhoto/")); //创建该目录 } string[] imgName = fileUp.ID.Split('_'); filePath = "carPhoto/" + hf_carNumber.Value + imgName[1] + filename; fileUp.SaveAs(Server.MapPath(filePath)); fileUp.Dispose(); } else { filePath = string.Empty; } } else { filePath = string.Empty; } return filePath; } //提交 protected void btn_submitEdit_Click(object sender, EventArgs e) { bool result = false; HisPictureRecord pictureRecord = new HisPictureRecord(); T_SHGPS_CARPHOTO carPhoto = null; if (string.IsNullOrEmpty(hf_id.Value)) { carPhoto = new T_SHGPS_CARPHOTO(); carPhoto.CARNUMBER = hf_carNumber.Value; carPhoto.CATCHPHOTOTIME = Convert.ToDateTime(tb_photoTime.Text); carPhoto.UPLOADTIME = DateTime.Now; carPhoto.UPLOADMAN = LoginUser.LoginName; carPhoto.FRONTAGEPHOTO = uploadPhoto(fu_straightAhead); carPhoto.LFPHOTO = uploadPhoto(fu_leftAnterior); carPhoto.LEFTWARDPHOTO = uploadPhoto(fu_straightLeft); carPhoto.LBPHOTO = uploadPhoto(fu_leftRear); carPhoto.BACKSIDEPHOTO = uploadPhoto(fu_straightAstern); carPhoto.RFPHOTO = uploadPhoto(fu_rightFront); carPhoto.RIGHTPHOTO = uploadPhoto(fu_straightRight); carPhoto.RBPHOTO = uploadPhoto(fu_rightRear); result = pictureRecord.AddRecord(carPhoto); } else { carPhoto = LibBase.RecivedObj(T_SHGPS_CARPHOTO.DBNAME, typeof(T_SHGPS_CARPHOTO), hf_id.Value) as T_SHGPS_CARPHOTO; carPhoto.UPLOADTIME = DateTime.Now; if (!string.IsNullOrEmpty(fu_straightAhead.FileName)) { carPhoto.FRONTAGEPHOTO = uploadPhoto(fu_straightAhead); } if (!string.IsNullOrEmpty(fu_leftAnterior.FileName)) { carPhoto.LFPHOTO = uploadPhoto(fu_leftAnterior); } if (!string.IsNullOrEmpty(fu_straightLeft.FileName)) { carPhoto.LEFTWARDPHOTO = uploadPhoto(fu_straightLeft); } if (!string.IsNullOrEmpty(fu_leftRear.FileName)) { carPhoto.LBPHOTO = uploadPhoto(fu_leftRear); } if (!string.IsNullOrEmpty(fu_straightAstern.FileName)) { carPhoto.BACKSIDEPHOTO = uploadPhoto(fu_straightAstern); } if (!string.IsNullOrEmpty(fu_rightFront.FileName)) { carPhoto.RFPHOTO = uploadPhoto(fu_rightFront); } if (!string.IsNullOrEmpty(fu_straightRight.FileName)) { carPhoto.RIGHTPHOTO = uploadPhoto(fu_straightRight); } if (!string.IsNullOrEmpty(fu_rightRear.FileName)) { carPhoto.RBPHOTO = uploadPhoto(fu_rightRear); } result = pictureRecord.ModifyRecord(carPhoto); } if (result) { ScriptManager.RegisterStartupScript(this, GetType(), "", "alert('数据提交成功！');execute();", true); } else { ScriptManager.RegisterStartupScript(this, GetType(), "", "alert('数据提交失败！');execute();", true); } } }}</textarea>