ASP.NET MVC从数据库读取、存入图片

一、DEMO效果

先选择图片,点击上传后,即可在照片预览中看到照片。如果需要更改,重新上传就可覆盖原图片。

                                                                                                          

二、代码

页面端,这里有个细节:再次上传后,如果<img>的URL不变,浏览器会从缓存中读取图片,这就会导致图片预览不会刷新,不显示刚上传的图片。解决这个问题只需要 传一个随机字符串作为参数即可。


@{Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}<!DOCTYPE html><html>
<head><meta name="viewport" content="width=device-width" /><title>图片编辑</title><link href="~/Scripts/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link href="~/Scripts/toastr/build/toastr.min.css" rel="stylesheet" /><script src="~/Scripts/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script><script src="~/Scripts/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script><script src="~/Scripts/this/customEditor_fieldTypes.js"></script><script src="~/Scripts/this/tools.js"></script><script src="~/Scripts/toastr/build/toastr.min.js"></script>
</head>
<body><div class="row"><div class="col-md-12"><ul class="nav nav-tabs" id="myTab" style="margin-top:20px"><li class="active"><a href="#tab_1" data-toggle="tab" class="btn" id="tabone">图片信息</a></li></ul><div class="tab-pane fade active in" id="tab_1"><div class="form-group col-md-6">@using (Ajax.BeginForm("", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post" }, new { enctype = "multipart/form-data", id = "FormImg" })){<input type="hidden" name="EmployeeId" id="EmployeeId"><span class="btn btn-default fileinput-button"><input type="file" name="file1" id="file1"></span><button class="btn btn-primary start" type="button" id="btnpictureid"><span><i class="fa fa-file"></i>&nbsp;上传</span></button><fieldset><legend>照片预览</legend><img id="headimg" src="@Url.Action("ShowImage","Basic",new { @ViewBag.EmployeeId})" /></fieldset>}</div></div></div></div>
</body>
</html>
<script type="text/javascript">var EmployeeId = @ViewBag.EmployeeId;$(document).ready(function () {$("#EmployeeId").val(EmployeeId);$("#btnpictureid").bind("click", function () { SaveImg(); });})function SaveImg() {$("#FormImg").attr("data-ajax-success", "OnSaveImgSuccess(data)");$("#FormImg").attr("data-ajax-failure", "OnSaveImgFail()");$("#FormImg").attr("action", "/Basic/UploadImg");$("#FormImg").submit();}function OnSaveImgSuccess(data) {if (data.result == "success") {toastr.success("上传成功");$("#headimg").attr({ "src": "/Basic/ShowImage?EmployeeId=" + @ViewBag.EmployeeId +"&Random=" + (Math.random()*100)+1});//解决因为URL没变导致图片不刷新的问题}else {toastr.error(data.msg);}}function OnSaveImgFail(msg) {toastr.error("图片上传失败,请重试!");}
</script>

三、控制器端代码 

 ///显示图片    public ActionResult ShowImage(long EmployeeId,int Random = 999 )
{byte[] byData = _IEmployeeInfo.GetEmployeeById(EmployeeId).Image;return File(byData, @"image/jpeg");
}///上传图片
public ActionResult UploadImg(long EmployeeId)
{string msg = string.Empty;string result = string.Empty;byte[] imgData = null;int flag = 0;if (Request.Files.Count > 0){HttpPostedFileBase file = Request.Files["file1"];if (file.ContentLength < 100 * 1024){string fileType = System.IO.Path.GetExtension(file.FileName);//获取文件类型if (fileType != null){fileType = fileType.ToLower();//将文件类型转化成小写if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileType)){imgData  = new byte[file.ContentLength];//新建一个长度等于图片大小的二进制地址file.InputStream.Read(imgData, 0, file.ContentLength);//将image读取到ImageData中flag = _IEmployeeInfo.UpdateImg(EmployeeId, imgData);if (flag > 0){result = Tips.success;}}else{msg = "只支持图片格式";result = Tips.fail;}}}else{msg = "图片大小不能超过100KB";result = Tips.fail;}}else{msg = "上传图片不能为空";result = Tips.fail;}return Json(new Res { result = result, msg = msg });
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.net密码找回

using System;using System.Collections.Generic;using System.Text;using System.Net.Mail;using System.IO; /// <summary> /// sendEmail 的摘要说明 /// </summary> public static class sendEmail { static sendEmail() { // // TODO…

C#使用模板文件批量导出word文档

需求背景 因为疫情爆发&#xff0c;进入一级响应状态&#xff0c;公安部门进行了严格出入境管理&#xff0c;需要对每个出入境的人进行状态跟踪。 疫情专班会将出入境的每个人员汇总在一张Excel表中&#xff0c;如下图所示&#xff1a; 每一行对应一个人员信息&#xff0c;一个…

WP7 开发(九) WP7控件开发(六)-DeepZoom技术

2011年11月14日 -DeepZoom&#xff1a;源于遥感影像的金字塔显示方式&#xff0c;提供了与高分辨率图像进行交互的能力&#xff0c;可以快速缩放图像而不影响应用的性能&#xff0c;加载或平移图像时可以光滑过度 -应用&#xff1a;高分辨率、极大图像的浏览&#xff0c;3D合成…

以太网单播、组播、广播

单播&#xff1a;单播MAC地址是从源到目的的唯一地址。 广播&#xff1a;就是一个主机向所有主机发送一个数据包。 组播&#xff1a;就是把数据发送给一组主机或者发送给感兴趣的主机。&#xff08;组播的MAC地址是以&#xff1a;01-00-5E开头的&#xff0c;组播的IP地址224.0.…

[Android疑难杂症]Gallery默认和横竖屏切换选中状态问题(2.3、2.3系统存在)

前言Gallery的Item使用的是一个ImageViewTextView&#xff0c;并且为其设置了selector&#xff0c;当使用setSelection设置时、横竖屏切换时Item的状态不会改变&#xff0c;这个目前在2.2、2.3系统中存在&#xff0c;高版本如4.0是不存在的。声明欢迎转载&#xff0c;但请保留文…

原子操作的实现原理(锁和循环CAS)

1 引言 原子&#xff08;atom&#xff09;本意是“不能被进一步分割的最小粒子”&#xff0c;而原子操作&#xff08;atomic operation&#xff09;意为”不可被中断的一个或一系列操作” 。在多处理器上实现原子操作就变得有点复杂。本文让我们一起来聊一聊在Inter处理器和…

git常规命令大全

git remote show origin 显示远端信息 git push --mirror 迁移的服务器路径&#xff08;ssh&#xff09; git remote add origin ssh 地址 git push -u origin 分支名 git push origin :分支名 删除远程分支 git push origin --delete 删除远程分支 1&#xff09;配置使用git仓…

const 一级指针的启示

直接上代码: #include int main() { const char* ptr nullptr;//可以通过二级指针去修改 //const chartemp_str &ptr; //*temp_str “123”; const chartemp_str nullptr; temp_str &ptr; *temp_str “123”; std::string str; str.resize(3); //memcpy(&…

Linux之软件安装YUM

在终端中输入yum即可…… 如果已经安装&#xff0c;会显示yum的参数 如果没有安装&#xff0c;会提示yum未安装或无效命令…… 建议&#xff1a; 以Redhat Enterprise Linux 5&#xff08;RHEL 5&#xff09;为例&#xff1a; 1. 首先你可以使用命令&#xff1a;rpm -qa |grep …

java(安全方便的从控制台读入数据)[对Scanner类进行封装,用正则表达式判断]...

此版本是对自己的这篇博客中的源码进行了优化&#xff1a;http://blog.csdn.net/haifengzhilian/article/details/7835404 package com.iflytek.util; import java.util.*; import java.util.regex.Pattern;/*** 类名&#xff1a;GetSafeInput* 作用&#xff1a;在控制台中安全…

关于子网的网络地址和广播地址的计算问题的方法

关于子网的网络地址和广播地址的计算问题的方法 前言 近期在备考网络管理员考试&#xff0c;发现之前学习的知识有些遗忘&#xff0c;更新一下自己的博客记录一下学习的过程&#xff0c;今天先写一个小问题的计算方法&#xff0c;希望可以对大家有所帮助。 一、题目&#xf…

cdgb调试linux崩溃程序

直接上原图: 使用命令:cgdb test test.core.2235 安装cgdb程序步骤&#xff1a; 1&#xff1a;wget http://cgdb.me/files/cgdb-0.7.1.tar.gz(网络会受到影响) 2:解压.tar.gz文件 3:./configure --prefix/usr/local之后会提示 error: CGDB requires curses.h or ncurses/cu…

关于计算机网络中超网聚合问题的计算

关于计算机网络中超网聚合问题的计算 近期备战网络管理员考试&#xff0c;遇到了一类的超网聚合问题&#xff0c;觉得有点意思&#xff0c;写一下解题步骤。 题目 把4个网络133.24.12.0/24&#xff0c;133.24.13.0/24&#xff0c;133.24.14.0/24和133.24.15.0/24汇聚成一个超…

博客

http://cocoalit.com/index?cat46

软考网络管理员存储容量计算相关问题

软考网络管理员存储容量计算相关问题 题目&#xff1a; 内存按字节编址&#xff0c;用存储容量为8K * 8比特的存储器芯片构成地址编号7000H至EFFFH的内存空间&#xff0c;至少需要多少片内存&#xff1f; 解题过程&#xff1a; 首先求解总体地址容量&#xff1a; 总体容量E…

hMailServer 邮件系统安装配置篇

此篇进入正题&#xff0c;详细的说一下安装和配置过程。得先说一下&#xff0c;hMailServer是真正的邮件服务端&#xff0c;而Roundcube Webmail仅仅是为hMailServer提供Webmail应用的&#xff0c;可以让你通过Web方式收发邮件&#xff0c;如果你不用Web方式收发邮件&#xff0…

linux下生成coredump文件

1产生core文件方法 产生coredump的条件&#xff0c;首先需要确认当前会话的ulimit –c&#xff0c;若为0&#xff0c;则不会产生对应的coredump&#xff0c;需要进行修改和设置。 ulimit -c unlimited (可以产生coredump且不受大小限制)&#xff0c;这种设置仅对当前生效&…

关于选择排序的优化——同时找出最小值与最大值

关于选择排序的优化——同时找出最小值与最大值 近期在学习排序算法&#xff0c;第一种方法就是选择排序。首先选择排序是一种不稳定的算法&#xff0c;其思想是通过遍历数组&#xff0c;找出最小值&#xff08;最大值&#xff09;的位置&#xff0c;放到已排序序列的启示&…

《几何与代数导引》例2.9

求以直线$xyz$为轴&#xff0c;过直线$2x3y-5z$的圆锥面方程.解&#xff1a;两条直线显然相交于原点.设圆锥面上的任意一点为$(x,y,z)$.我们知道直线$2x3y-5z$的方向向量为$(15,10,-6)$.则直线$xyz$的方向向量为$(1,1,1)$.我们知道\begin{equation}\cos \langle (1,1,1), (15,1…