功能介绍:第“一”解决的是js代码实现file控件浏览图片显示到img,单击保存第“二”实现把file控件浏览到的图片转成二进制格式保存到数据库,第“三”实现从数据库读出二进制流图片显示到页面img控件;
一 、 js实现input<file>控件选择图片显示到img控件
1 js代码
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '50px';
imgObjPreview.style.height = '60px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "50px";
localImagId.style.height = "60px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
2 页面源码
<input type="file" name="file" id="doc" runat="server" style="width:150px;" onchange="javascript:setImagePreview();"/>
<div id="localImag" style ="float :left;"><img id="preview" runat ="server"
src="http://blog.chuangling.net/Public/images/top.jpg" width="50" height="60" style="display: block; width: 50px; height:
60px;"/></div>
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
二、图片转成二进制格式保存到数据库
客户端页面控件
<input type="file" name="file" id="doc" runat="server" style="width:150px;" onchange="javascript:setImagePreview();"/>
cs代码
//图片转成二进制流
Stream st = doc.PostedFile.InputStream;
int length = doc.PostedFile.ContentLength;
byte[] bytes = new byte[length];
st.Read(bytes, 0, length);
st.Close();
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
三 、二进制图片转换成JPEG格式在页面输出
第一步
建立两个aspx页面
default1.aspx(显示图片页)和default2.aspx(读取数据库二进制图片)
第二部
1.default1.aspx 放一个image控件
<asp:Image ID="Image1" runat="server" Width ="50" Height ="60"/>
2.default2.aspx 链接数据库读取二进制流图片显示到页面上
SqlConnection con = new SqlConnection("server=98.126.53.250,2688;user id=lcpt;pwd=lcpt*-583;database=licai");
con.Open();
SqlCommand com = new SqlCommand("select 凭证一,打款日期 from bangzhu_mingxi where 帮助编号='" + conn.bb_id + "'", con);
//选择图片
SqlDataReader dr = com.ExecuteReader();
if (dr.Read())
{
//读取数据二进制图片显示到img;
byte[] photo1 = (byte[])dr["凭证一"];
MemoryStream ms1 = new MemoryStream(photo1);
System.Drawing.Image img1 = System.Drawing.Image.FromStream(ms1);
int width1 = img1.Width;
int height1 = img1.Height;
Bitmap bmp1 = new Bitmap(ms1);
bmp1.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
con.Close();
}
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、