文件上传控件 - 立即单击并加载图像 [英] File upload control - click and load image immediately
本文介绍了文件上传控件 - 立即单击并加载图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在选择文件后上传新图像并立即替换旧图像？
这是我目前的代码
public partial class AdminEditProduct：System.Web.UI.Page
{
protected void Page_Load（ object sender，EventArgs e）
{
if （Request.QueryString.Count！= 0 ）
{
int ProductID = Convert.ToInt32（Request.QueryString [ ProductID]）;
if （！IsPostBack）
{
string strConnectionString = ConfigurationManager.ConnectionStrings [ ConnectionString]。ConnectionString;
SqlConnection myConnect = new SqlConnection（strConnectionString）;
SqlCommand cmd = new SqlCommand（ SELECT ProductID，ProductName，Price，Description，Sdesc，Picture FROM Product WHERE ProductID = + ProductID，myConnect）;
myConnect.Open（）;
SqlDataReader reader = cmd.ExecuteReader（）;
if （reader.Read（））
{
txtProductName.Text = reader [ ProductName]。ToString（）;
txtPrice.Text = reader [ Price]。ToString（）;
txtDescription.Text = reader [ 描述]。ToString（）;
txtSdesc.Text = reader [ Sdesc]。ToString（）;
会话[ picURL] = reader [ 图片]。ToString（）;
Image1.ImageUrl = 〜/ image / + Session [ picURL]。ToString（）;
}
reader.Close（）;
myConnect.Close（）;
}
}
}
受保护 void ImageURL（ object sender，EventArgs e）
{
{
string picture = Session [ 图片]。ToString （）;
if （（ string .IsNullOrEmpty（picture）））
{
string strConnectionString = ConfigurationManager.ConnectionStrings [ ConnectionString的]的ConnectionString。
SqlConnection myConnect = new SqlConnection（strConnectionString）;
myConnect.Open（）;
string strCommandText = SELECT（图片）FROM Product;
SqlCommand cmd = new SqlCommand（strCommandText，myConnect）;
SqlDataReader reader = cmd.ExecuteReader（）;
myConnect.Close（）;
}
}
}
受保护 void btnUpdate_Click（ object sender，EventArgs e）
{
Image1.ImageUrl = 空;
EditDescription（）;
}
private void EditDescription（）
{
尝试
{
int ProductID = Convert.ToInt32（Request.QueryString [ ProductID]）;
string 描述= txtDescription.Text;
string strConnectionString = ConfigurationManager.ConnectionStrings [ ConnectionString的]的ConnectionString。
SqlConnection myConnect = new SqlConnection（strConnectionString）;
string strCommandText =（ UPDATE Product + SET ProductName = @ aProductName + ，Price = @ aPrice + ，Description = @ aDescription + ，Sdesc = @ aSdesc + ，Picture = @ aPicture + WHERE ProductID = @ aProductID）;
SqlCommand cmd = new SqlCommand（strCommandText，myConnect）;
cmd.Parameters.Add（ @ aProductID，SqlDbType.Int ）.Value = ProductID;
cmd.Parameters.AddWithValue（ @ aProductName，txtProductName.Text）;
cmd.Parameters.AddWithValue（ @ aPrice，Convert.ToDecimal（txtPrice.Text ））;
cmd.Parameters.AddWithValue（ @ aDescription，txtDescription.Text）;
cmd.Parameters.AddWithValue（ @ aSdesc，txtSdesc.Text）;
if （FileUpload1.FileName！= ）
{
会话[ picURL] = FileUpload1.FileName;
}
cmd.Parameters.AddWithValue（ @ aPicture，会话[ picURL]）;
myConnect.Open（）;
int result = cmd.ExecuteNonQuery（）;
myConnect.Close（）;
}
catch （例外e）
}
解决方案
嗨请尝试这项工作
< style type = text / css >
#imagePreview
{
宽度：60px;
身高：60px;
border：0px solid;
float：left;
filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（sizingMethod = scale）;
}
< / style >
< script 类型 = text / javascript >
var loadImageFile =（function（）{
if（window.FileReader）{
var oPreviewImg = null，oFReader = new window.FileReader（），
rFilter = / ^（?: image \ / bmp | image \ / cis \-cod | image \ / gif | image \ / ief | image\ / JPEG | image\ / JPEG | image\ / JPEG | image\ / pipeg | image\ / PNG | image\ / svg\ + XML | image\ / TIFF | image\ / x\-cmu\光栅| image\ / x\-CMX | image\ / x\图标| image\ / x\-portable\-anymap | image\ / X \-portable\\ -bitmap | image\ / x\-portable\-graymap的| image\ / x\-portable\-像素图| image\ / x\-RGB | image\ / x\-xbitmap | image\ / x\-xpixmap | image\ / x\-xwindowdump）
/ I;
oFReader.onload = function（oFREvent）{
if（！oPreviewImg）{
var newPreview = document.getElementById（imagePreview）;
oPreviewImg = new Image（）;
oPreviewImg.style.width =（newPreview.offsetWidth）.toString（）+px;
// oPreviewImg.style.height =（newPreview.offsetHeight）.toString（）+px;
newPreview.appendChild（oPreviewImg）;
}
oPreviewImg.src = oFREvent.target.result;
};
return function（）{
var aFiles = document.getElementById（fileUpload）。files;
if（aFiles.length === 0）{return; }
if（！rFilter.test（aFiles [0] .type））{alert（你必须选择一个有效的图像文件！）;返回; }
oFReader.readAsDataURL（aFiles [0]）;
}
}
if（navigator.appName ===Microsoft Internet Explorer）{
return function（）{
document.getElementById（imagePreview） .filters.item（DXImageTransform.Microsoft.AlphaImageLoader）。src = document.getElementById（fileUpload）。value;
}
}
}）（）;
< / script >
< input id = fileUpload type = 文件 名称 = fileUpload onchange < span class =code-keyword> = loadImageFile（）; / >
&l t; span id = imagePreview > < / span >
如果适用，请标记为答案
how can i upload a new image after choosing file and immediately replace the old image?
this is my current code
public partial class AdminEditProduct : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString.Count != 0)
{
int ProductID = Convert.ToInt32(Request.QueryString["ProductID"]);
if (!IsPostBack)
{
string strConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection myConnect = new SqlConnection(strConnectionString);
SqlCommand cmd = new SqlCommand("SELECT ProductID, ProductName, Price, Description, Sdesc, Picture FROM Product WHERE ProductID=" + ProductID, myConnect);
myConnect.Open();
SqlDataReader reader = cmd.ExecuteReader();
if (reader.Read())
{
txtProductName.Text = reader["ProductName"].ToString();
txtPrice.Text = reader["Price"].ToString();
txtDescription.Text = reader["Description"].ToString();
txtSdesc.Text = reader["Sdesc"].ToString();
Session["picURL"] = reader["Picture"].ToString();
Image1.ImageUrl = "~/image/" + Session["picURL"].ToString();
}
reader.Close();
myConnect.Close();
}
}
}
protected void ImageURL(object sender, EventArgs e)
{
{
string picture = Session["Picture"].ToString();
if ((string.IsNullOrEmpty(picture)))
{
string strConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection myConnect = new SqlConnection(strConnectionString);
myConnect.Open();
string strCommandText = "SELECT (Picture) FROM Product";
SqlCommand cmd = new SqlCommand(strCommandText, myConnect);
SqlDataReader reader = cmd.ExecuteReader();
myConnect.Close();
}
}
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
Image1.ImageUrl = null;
EditDescription();
}
private void EditDescription()
{
try
{
int ProductID = Convert.ToInt32(Request.QueryString["ProductID"]);
string Description = txtDescription.Text;
string strConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlConnection myConnect = new SqlConnection(strConnectionString);
string strCommandText = ("UPDATE Product " + " SET ProductName=@aProductName " + " , Price=@aPrice " + " , Description=@aDescription " + " , Sdesc=@aSdesc " + " , Picture=@aPicture " + " WHERE ProductID=@aProductID ");
SqlCommand cmd = new SqlCommand(strCommandText, myConnect);
cmd.Parameters.Add("@aProductID", SqlDbType.Int).Value = ProductID;
cmd.Parameters.AddWithValue("@aProductName", txtProductName.Text);
cmd.Parameters.AddWithValue("@aPrice", Convert.ToDecimal(txtPrice.Text));
cmd.Parameters.AddWithValue("@aDescription", txtDescription.Text);
cmd.Parameters.AddWithValue("@aSdesc", txtSdesc.Text);
if (FileUpload1.FileName != "")
{
Session["picURL"] = FileUpload1.FileName;
}
cmd.Parameters.AddWithValue("@aPicture", Session["picURL"]);
myConnect.Open();
int result = cmd.ExecuteNonQuery();
myConnect.Close();
}
catch (Exception e)
} 解决方案
Hi Please try this this work
<style type="text/css"> #imagePreview { width: 60px; height: 60px; border: 0px solid; float: left; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <script type="text/javascript"> var loadImageFile = (function () { if (window.FileReader) { var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)
/i; oFReader.onload = function (oFREvent) { if (!oPreviewImg) { var newPreview = document.getElementById("imagePreview"); oPreviewImg = new Image(); oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; // oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; newPreview.appendChild(oPreviewImg); } oPreviewImg.src = oFREvent.target.result; }; return function () { var aFiles = document.getElementById("fileUpload").files; if (aFiles.length === 0) { return; } if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(aFiles[0]); } } if (navigator.appName === "Microsoft Internet Explorer") { return function () { document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("fileUpload").value; } } })(); </script> <input id="fileUpload" type="file" name="fileUpload" onchange="loadImageFile(); " /> <span id="imagePreview"></span>
Please mark as answer if it works for you
这篇关于文件上传控件 - 立即单击并加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
