js,二进制转换保存到数据库及读取二进制图片

功能介绍：第“一”解决的是js代码实现file控件浏览图片显示到img，单击保存第“二”实现把file控件浏览到的图片转成二进制格式保存到数据库，第“三”实现从数据库读出二进制流图片显示到页面img控件；

一、 js实现input<file>控件选择图片显示到img控件

1 js代码

//下面用于图片上传预览功能

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 html源码

<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>

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

二、图片转成二进制格式保存到数据库

客户端页面控件

后台代码：

//图片转成二进制流

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=.;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();

}

js,二进制转换保存到数据库及读取二进制图片

猜你喜欢