上傳本地圖片到資料庫
阿新 • • 發佈：2018-12-30
這兩天看了很多上傳圖片的外掛，功能強大的可以將圖片剪下，放大，縮小等，不過往往這些外掛都很大，需要載入好多個css和js檔案。我做的就是一個很小的專案，之前的模板就已經呼叫好幾個css了，再加往往會重複，很麻煩。
後來準備寫一個只能將本地檔案上傳，不涉及剪下等複雜操作的，這樣就簡單多了。
話不多說先上程式碼，首先是我已經做好正在使用的部分程式碼。
可以使用的上傳圖片程式碼
view層獲取圖片
此程式碼同樣可以用來獲取檔案
- HTML程式碼
<div class="field">
<input type="text" id="imagedata" - JS程式碼
<script>
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function 呃，這裡是利用form直接向控制器提交資料，所以沒有ajax的程式碼。
控制器儲存資料
- 將base64的字串轉換為byte[]的圖片
public byte[] GetImageByte(string imagedata)
{
// 因為字串前帶有“data:image/png;base64”所以需要先擷取
string pic = imagedata.Remove(1, 22);
byte[] imageBytes = Convert.FromBase64String(pic);
return imageBytes;
}- 控制器儲存資料
news.picture = GetImageByte(imagedata);以下部分是還沒有使用的程式碼
從資料庫讀取資料顯示
- ｖｉｅｗ層直接呼叫這個方法即可
public FileResult Image()
{
string imagepath = "";
var img= db.T_News.SqlQuery("select image from T_News").FirstOrDefault();
byte[] image = img;
return new FileContentResult(image, "image/jpeg");
}其他可能用到的方法
- 引數是圖片路徑:返回Byte[]型別:
public byte[] GetPictureData(string imagepath)
{
imagepath = "E:\\123.png";
//根據圖片檔案的路徑使用檔案流開啟，並儲存為byte[]
System.IO.FileStream fs = new System.IO.FileStream(imagepath, System.IO.FileMode.Open);
byte[] byData = new byte[fs.Length];
fs.Read(byData, 0, byData.Length);
fs.Close();
return byData;
}- 引數型別是Image物件，返回Byte[]型別:
public byte[] PhotoImageInsert(System.Drawing.Image imgPhoto)
{
string pic = "";
byte[] imageBytes = Convert.FromBase64String(pic);
//將Image轉換成流資料，並儲存為byte[]
System.IO.MemoryStream mstream = new System.IO.MemoryStream();
imgPhoto.Save(mstream, System.Drawing.Imaging.ImageFormat.Bmp);
byte[] byData = new Byte[mstream.Length];
mstream.Position = 0;
mstream.Read(byData, 0, byData.Length);
mstream.Close();
return byData;
} 網上找到的兩個例子
- 獲取圖片位置，不過得到的位置為fakepath
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定義input type="file" 的樣式</title>
<style type="text/css">
body {
font-size: 14px;
}
input {
vertical-align: middle;
margin: 0;
padding: 0;
}
.file-box {
position: relative;
width: 340px;
}
.txt {
height: 22px;
border: 1px solid #cdcdcd;
width: 180px;
}
.btn {
background-color: #FFF;
border: 1px solid #CDCDCD;
height: 24px;
width: 70px;
}
.file {
position: absolute;
top: 0;
right: 80px;
height: 24px;
filter: alpha(opacity:0);
opacity: 0;
width: 260px;
}
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='瀏覽...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上傳" />
</form>
</div>
</body>
</html> - 獲取圖片的base64，我的程式碼就是依據這個改的
<html>
<body>
<img id="image" src="" />
<br />
<input type="file" onchange="selectImage(this);" />
<br />
<input type="button" onclick="uploadImage();" value="提交" />
<input id="imagepath">
<script>
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
alert(document.getElementById('image').src);
document.getElementById('imagepath').value = document.getElementById('image').src.toString();
}
reader.readAsDataURL(file.files[0]);
// alert("evt.target.result.type");
// document.getElementById('imagepath').value = evt.target.result;
}
function uploadImage() {
$.ajax({
type: 'POST',
url: 'Home/Imageabc',
data: {
image: image
},
async: false,
dataType: 'json',
success: function (data) {
if (data.success) {
alert('上傳成功');
} else {
alert('上傳失敗');
}
},
error: function (err) {
alert('網路故障');
}
});
}
</script>
<script src="jquery.js"></script>
</body>
</html>網上資料連結