asp.net mvc3.0上传图片以二进制的形式保存到数据库中并显示出来，而且还能通过js预览（跨浏览器）
一、前台脚本实现图片上传之前的预览效果
@using (Html.BeginForm("SaveImg", "Test", FormMethod.Post, new { enctype = "multipart/form-data", id = "filefrm" }))
@*一定要记得加enctype = "multipart/form-data"属性否则不能在后台获取到*@
{
<input type="file" id="uploadfile" name="uploadfile" /><input id="submit" type="submit"
value="上传" />
}
<div id="divPreview">
<img id="preview" src="" />这里是预览图片
</div>
<img src="/Test/LookImg" />这里是实现上传之后的图片
@if (false)
{
<script src="http://www.cnblogs.com/Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function (e) {
var $file = $("#uploadfile");
var filename = $file.val(), index, ext;
if (filename.length === 0) { alert("请选择要上传的文件"); e.preventDefault(); return false; }
index = filename.lastIndexOf('.');
ext = filename.substring(index + 1, filename.length);
if (ext !== "gif" && ext !== "jpeg" && ext != "png" && ext != "jpg") {
alert("上传的文件格式不正确！");
e.preventDefault();
return false;
}
});
$("#uploadfile").change(function () {
ShowImg(this);
});
});
function ShowImg(obj) { //上传之前先进行图片的预览
var browserVersion = window.navigator.userAgent.toUpperCase(); //浏览器版本信息
if (obj) {
//ie
if (window.navigator.appName == "Microsoft Internet Explorer") {//ie浏览器
if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6
$("#preview").attr("src", obj.value);
} else {//ie7、ie8、ie9未测试
//if(browserVersion.indexOf("MSIE 7.0")>-1 || browserVersion.indexOf("MSIE 8.0")>-1 ||browserVersion.indexOf("MSIE 9.0")>-1)
//滤镜实现
obj.select();
var newPreview = document.getElementByIdx_x("divNewPreview");
if (newPreview == null) {
newPreview = document.createElement_x("div");
newPreview.setAttribute("id", "divNewPreview");
newPreview.style.width = "170";
newPreview.style.height = "160";
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
$("#divPreview").attr("style", "display:none");
$("#divPreview").after(newPreview);
}
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
var firefoxVersion = parseFloat(window.navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (obj.files) {
//return window.URL.createObjectURL(obj.files[0]);
if (firefoxVersion < 7) {//firefox7.0以下版本
$("#preview").attr("src", obj.files[0].getAsDataURL());
} else {//火狐7.0以上版本
$("#preview").attr("src", window.URL.createObjectURL(obj.files[0]));
}
}
}
else if (obj.files) {
//兼容chrome等，也可以兼容火狐，通过HTML5来获取路径
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (e) { $("#imgHeadPhoto").attr("src", e.target.result); }
reader.readAsDataURL(obj.files[0]);
} else if ($.browser.safari) {
alert("暂时不支持Safari浏览器!");
}
} else {
$("#preview").attr("src", obj.value); //其他
}
}
}
</script>
二、后台接收上传的文件进行二进制的形式保存
[HttpPost]
public void SaveImg()
{
HttpPostedFileBase postedfile = Request.Files["uploadfile"];
if (postedfile.ContentLength > 0)
{
int len = postedfile.ContentLength;
string contentType = postedfile.ContentType;
byte[] bytes = new byte[len];
Stream obj = postedfile.InputStream;
obj.Read(bytes, 0, len);
obj.Close();
Test test = new Test();
if (test.AddPicture(bytes, contentType, len) > 0)
{
Response.Write("Y");
}
else
{
Response.Write("N");
}
}
else
{
Response.Write("N");
}
}
public int AddPicture(byte[] bytes, string contentType, int size)
{
string sqlStr = string.Format("INSERT INTO PicTable(Picture,ContentType,ImageSize) VALUES(@pic,@type,@size)");
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = "server=.;database=test;Trusted_Connection=true;";
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = sqlStr;
cmd.CommandType = CommandType.Text;
cmd.Parameters.Add("@pic", SqlDbType.VarBinary, size).Value = bytes;
cmd.Parameters.Add("@type", SqlDbType.VarChar, 30).Value = contentType;
cmd.Parameters.Add("@size", SqlDbType.Int, 4).Value = size;
con.Open();
return cmd.ExecuteNonQuery();
}
}
三、实现图片的代码
public void LookImg()
{
string sqlStr = string.Format("SELECT Picture,ContentType,ImageSize FROM dbo.PicTable WHERE ImageID={0}",1);
SqlDataReader reader = SqlHelper.GetSqlDataReader("server=.;database=test;Trusted_Connection=true;", sqlStr, false, null);
if (reader.HasRows)
{
while (reader.Read())
{
byte[] bytes = (byte[])reader[0];
int len = (int)reader[2];
string contenType = (string)reader[1];
MemoryStream ms = new MemoryStream(bytes,0,len);
Response.ContentType = contenType;
ms.WriteTo(Response.OutputStream);
}
}
}
