ASP.NET控制元件上傳圖片
阿新 • • 發佈:2019-02-18
使用asp.net控制元件上傳圖片是一種比較簡單的方式,直接在後臺就可以得到圖片流,並對流進行上傳操作。
控制元件上傳圖片
前端頁面
第一種方式,使用asp控制元件
<asp:FileUpload runat="server" ID="image1"/>
<asp:Button runat="server" ID="button1" Text="上傳圖片" onclick="button1_Click" />
第二種方式,使用html標籤並加入css樣式
由於file控制元件的樣式比較難看,所以加入了a標籤,來更改樣式,使file控制元件的長度和按鈕長度一樣,前面的文字框只是為了顯示上傳的檔案,和file控制元件的樣式保持一致。
HTML部分
<input type="text" id="text1" readonly="readonly" class="text_1" />
<a href="javascript:;" class="a-upload">
<input type="file" runat="server" id="file1" autocomplete="off" accept="image/*" onchange="fileChange(this,'text1');" style="width: 100px;"/>瀏覽
</a>
javasprict
function fileChange(p,v){
if (p != null && v != null) {
var va = document.getElementById(v);
va.value = p.value;
va.focus();
}
}
CSS樣式
<style type="text/css">
.text_1{ width: 477px; height: 18px; line-height: 18px; border: 1px solid #ccc ; padding: 5px; color: #333; font-size: 14px;vertical-align: middle;}
.a-upload {padding: 4px 28px;height: 20px;line-height: 20px;letter-spacing:4px;font-size:14px;position: relative;
cursor: pointer;color: #444;background: #eee;border: 1px solid #ddd;border-radius: 4px;display: inline-block;
text-decoration:none;display: inline;zoom: 1}
.a-upload input {position: absolute;font-size: 40px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer}
.a-upload:hover {color: #111;background: #aaa;border-color: #ccc;text-decoration: none}
</style>
後臺部分
後臺部分程式碼在接收圖片的時候,直接使用伺服器控制元件接收即可。
protected void button1_Click(object sender, EventArgs e)
{
try
{
HttpPostedFile file=image1.PostedFile;//對應前端file控制元件的id
if (file != null && file.ContentLength > 0)
{
string fileName = file.FileName;
string fileSize = file.ContentLength.ToString();
string fileType = file.ContentType;
string fileExtension = Path.GetExtension(fileName);
if (fileExtension == null || fileExtension.Trim() == "")
{
fileExtension = "";
}
else
{
if (fileExtension.IndexOf('.') == -1)
{
fileExtension = "." + fileExtension;
}
}
string filePath = "/image1"+"/"+Guid.NewGuid().ToString()+fileExtension;
Stream stream = file.InputStream;//檔案流
//FileUploadClass upload = new FileUploadClass();//上傳類,自己寫就可以
//upload.UploadFile(stream, filePath);//上傳檔案
stream.Close();
}
}
catch (Exception ee)
{
}
}