1. 程式人生 > >MVC利用BootstrapFileInput 插件上傳圖片

MVC利用BootstrapFileInput 插件上傳圖片

adf pos wid turn exists -h spa ring pda

話不多說。

html代碼:一個from包裹的html

<div class="form-group" id="uploadForm">
<div class="h4">頭像預覽</div>
<div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">

<div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;">
@if (!string.IsNullOrEmpty(Model.User.Image))
{
<img id=‘picImg‘ style="width: 100%;height: auto;max-height: 140px;" src="@Model.User.Image" />
}
</div>
<div id="im" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">選擇文件</span>
<span class="fileinput-exists">換一張</span>
<input type="file" name="pic1" id="picID" accept="image/gif,image/jpeg,image/x-png" />
</span>
<a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>
</div>
</div>
</div>
<p>頭像文件僅支持gif、png、jpg文件</p>
<button type="button" id="uploadSubmit" class="btnZHBlue mTop10">提交</button>

後臺代碼:

public ActionResult Update(int id)//上傳頭像
{

string all = Request["image"].ToString();//這是base64編碼,直接保存數據庫。

if (all == null)
{
return Json(false);
}

else
{
return Json(true);
}
}

MVC利用BootstrapFileInput 插件上傳圖片