asp.net上傳圖片並能實現實時預覽
阿新 • • 發佈：2019-01-10
前臺aspx：
<script type="text/javascript">
//下面用於圖片上傳預覽功能
function setImagePreview(avalue) {
document.getElementById("tbFile").value = document.getElementById("file").value;
var docObj = document.getElementById("file");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
//imgObjPreview.style.width = '150px';
//imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要以下方式
imgObjPreview.src = getObjectURL(docObj.files[0]);
}
var docObj2 = document.getElementById("file2");//第二個上傳
document.getElementById("tbFileF").value = document.getElementById("file2").value;
var imgObjPreview2 = document.getElementById("preview2");
if (docObj2.files && docObj2.files[0]) {
//火狐下，直接設img屬性
imgObjPreview2.style.display = 'block';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview2.src = getObjectURL(docObj2.files[0]);
}
var docObj3 = document.getElementById("file3");//第三個上傳同理
document.getElementById("tbFileQ").value = document.getElementById("file3").value;
var imgObjPreview3 = document.getElementById("preview3");
if (docObj3.files && docObj3.files[0]) {
//火狐下，直接設img屬性
imgObjPreview3.style.display = 'block';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview3.src = getObjectURL(docObj3.files[0]);
}
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
</script>
<body scroll="no">
<form id="form1" runat="server" enctype="multipart/form-data">/非常重要
....
....
<tr>
<td width="7%" align="right">
圖片1：
</td>
<td width="93%">
<%--<span class="zt"> <asp:FileUpload ID="picFileUpload" runat="server"
Width="295px" />
（圖片格式建議為JPG\GIF\PNG\PDF，大小建議不超過1M）</span>--%>
<input id="tbFile" type="text" style="width:200px;"/>
<input name="file" type="file" id="file" onchange="setImagePreview();" style="width: 103px; height: 41px; display: none" />
<input name="image1" type="button" id="image1" runat="server" class="button margin-left" onclick="file.click();" value="+ 選擇圖片" />
</td>
</tr>
<tr>
<td width="7%" align="right">
預覽：
</td>
<td>
<div id="localImag"><img id="preview" width="150" style="display: block;"/>
</div>
</td>
</tr>
<tr>
<td width="7%" align="right">
圖片2：
</td>
<td width="93%">
<%--<span class="zt"> <asp:FileUpload ID="picFileUpload" runat="server"
Width="295px" />
（圖片格式建議為JPG\GIF\PNG\PDF，大小建議不超過1M）</span>--%>
<input id="tbFileF" type="text" style="width:200px;"/>
<input name="file" type="file" id="file2" onchange="setImagePreview();" style="width: 103px; height: 41px; display: none" />
<input name="image1" type="button" id="image1" runat="server" class="button margin-left" onclick="file2.click();" value="+ 選擇圖片" />
</td>
</tr>
<tr>
<td width="7%" align="right">
預覽：
</td>
<td>
<div id="localImag"><img id="preview2" width="150" style="display: block;"/>
</div>
</td>
</tr>
....
....
<body>
後臺：
...
{
HttpPostedFile file = Request.Files["file"];
HttpPostedFile file = Request.Files["file2"];
string pictrueName = imageupload(file);
}
...
public string imageupload(HttpPostedFile file1)
{
Boolean fileOk = false;
string path = HttpContext.Current.Server.MapPath("~/uppic/");//存貯路徑
string resultpath = "";
if (file1!=null)
{
string fileExtension = System.IO.Path.GetExtension(file1.FileName).ToLower();
string[] allowExtension = { ".jpg", ".gif", ".png", ".pdf" };
for (int i = 0; i < allowExtension.Length; i++)
{
if (fileExtension == allowExtension[i])
{
fileOk = true;
break;
}
}
if (!fileOk)
{
Response.Write("<script>alert('上傳的檔案型別不對！');history.back(-1);</script>");
Response.End();
}
if (file1.ContentLength > 1024000)
{
fileOk = false;
}
if (fileOk)
{
try
{
resultpath = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileExtension;
file1.SaveAs(path + resultpath);
}
catch
{
Response.Write("<script>alert('圖片上傳失敗！');history.back(-1);</script>");
Response.End();
}
}
else
{
Response.Write("<script>alert('檔案型別或者檔案大小超出1M或者檔案型別不對！');history.back(-1);</script>");
Response.End();
}
return resultpath;
}
else
{
return "";
}
}
context.Request.Files為NULL常見問題
在實現圖片上傳功能的時候出現在ashx等處理頁面出現context.Request.Files為NULL異常，有幾點需要注意：
1、在客戶端可以將form用submit提交，如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function UpLoad() {
$("#form1").submit();
}
</script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data" action="ImageHandler.ashx">
<div>
<input id="File1" type="file" runat="server"/>
<input id="Button1" type="button" value="上傳" onclick="UpLoad()" /></div>
<div id="imgList"></div>
</form>
</body>
</html>
2、form表單需要加上屬性method="post" enctype="multipart/form-data"
3、檔案控制元件需要加上runat="server"屬性
<script type="text/javascript">
//下面用於圖片上傳預覽功能
function setImagePreview(avalue) {
document.getElementById("tbFile").value = document.getElementById("file").value;
var docObj = document.getElementById("file");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
//imgObjPreview.style.width = '150px';
//imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要以下方式
imgObjPreview.src = getObjectURL(docObj.files[0]);
}
var docObj2 = document.getElementById("file2");//第二個上傳
document.getElementById("tbFileF").value = document.getElementById("file2").value;
var imgObjPreview2 = document.getElementById("preview2");
if (docObj2.files && docObj2.files[0]) {
//火狐下，直接設img屬性
imgObjPreview2.style.display = 'block';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview2.src = getObjectURL(docObj2.files[0]);
}
var docObj3 = document.getElementById("file3");//第三個上傳同理
document.getElementById("tbFileQ").value = document.getElementById("file3").value;
var imgObjPreview3 = document.getElementById("preview3");
if (docObj3.files && docObj3.files[0]) {
//火狐下，直接設img屬性
imgObjPreview3.style.display = 'block';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview3.src = getObjectURL(docObj3.files[0]);
}
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
</script>
<body scroll="no">
<form id="form1" runat="server" enctype="multipart/form-data">/非常重要
....
....
<tr>
<td width="7%" align="right">
圖片1：
</td>
<td width="93%">
<%--<span class="zt"> <asp:FileUpload ID="picFileUpload" runat="server"
Width="295px" />
（圖片格式建議為JPG\GIF\PNG\PDF，大小建議不超過1M）</span>--%>
<input id="tbFile" type="text" style="width:200px;"/>
<input name="file" type="file" id="file" onchange="setImagePreview();" style="width: 103px; height: 41px; display: none" />
<input name="image1" type="button" id="image1" runat="server" class="button margin-left" onclick="file.click();" value="+ 選擇圖片" />
</td>
</tr>
<tr>
<td width="7%" align="right">
預覽：
</td>
<td>
<div id="localImag"><img id="preview" width="150" style="display: block;"/>
</div>
</td>
</tr>
<tr>
<td width="7%" align="right">
圖片2：
</td>
<td width="93%">
<%--<span class="zt"> <asp:FileUpload ID="picFileUpload" runat="server"
Width="295px" />
（圖片格式建議為JPG\GIF\PNG\PDF，大小建議不超過1M）</span>--%>
<input id="tbFileF" type="text" style="width:200px;"/>
<input name="file" type="file" id="file2" onchange="setImagePreview();" style="width: 103px; height: 41px; display: none" />
<input name="image1" type="button" id="image1" runat="server" class="button margin-left" onclick="file2.click();" value="+ 選擇圖片" />
</td>
</tr>
<tr>
<td width="7%" align="right">
預覽：
</td>
<td>
<div id="localImag"><img id="preview2" width="150" style="display: block;"/>
</div>
</td>
</tr>
....
....
<body>
後臺：
...
{
HttpPostedFile file = Request.Files["file"];
HttpPostedFile file = Request.Files["file2"];
string pictrueName = imageupload(file);
}
...
public string imageupload(HttpPostedFile file1)
{
Boolean fileOk = false;
string path = HttpContext.Current.Server.MapPath("~/uppic/");//存貯路徑
string resultpath = "";
if (file1!=null)
{
string fileExtension = System.IO.Path.GetExtension(file1.FileName).ToLower();
string[] allowExtension = { ".jpg", ".gif", ".png", ".pdf" };
for (int i = 0; i < allowExtension.Length; i++)
{
if (fileExtension == allowExtension[i])
{
fileOk = true;
break;
}
}
if (!fileOk)
{
Response.Write("<script>alert('上傳的檔案型別不對！');history.back(-1);</script>");
Response.End();
}
if (file1.ContentLength > 1024000)
{
fileOk = false;
}
if (fileOk)
{
try
{
resultpath = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileExtension;
file1.SaveAs(path + resultpath);
}
catch
{
Response.Write("<script>alert('圖片上傳失敗！');history.back(-1);</script>");
Response.End();
}
}
else
{
Response.Write("<script>alert('檔案型別或者檔案大小超出1M或者檔案型別不對！');history.back(-1);</script>");
Response.End();
}
return resultpath;
}
else
{
return "";
}
}
context.Request.Files為NULL常見問題
在實現圖片上傳功能的時候出現在ashx等處理頁面出現context.Request.Files為NULL異常，有幾點需要注意：
1、在客戶端可以將form用submit提交，如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function UpLoad() {
$("#form1").submit();
}
</script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data" action="ImageHandler.ashx">
<div>
<input id="File1" type="file" runat="server"/>
<input id="Button1" type="button" value="上傳" onclick="UpLoad()" /></div>
<div id="imgList"></div>
</form>
</body>
</html>
2、form表單需要加上屬性method="post" enctype="multipart/form-data"
3、檔案控制元件需要加上runat="server"屬性