使用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)
{
}
}