分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

MVC利用BootstrapFileInput 插件上传图片

发布时间:2023-09-06 01:43责任编辑:蔡小小关键词:MVC上传图片Bootstrap

话不多说。

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 插件上传图片

原文地址:https://www.cnblogs.com/zchzt/p/8466935.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved