Kendo UI ASP.Net MVC 实现多图片及时显示加上传(其中有借鉴别人的代码,自己又精简了一下,如有冒犯,请多原谅!)
View:
<div class="demo-section k-content">
@(Html.Kendo().Upload()
.Name("files") //这个是kendoUI上传控件的ID也是name
.Async(a => a
.Save("Savesd", "Admins") // 这个是kendoUI保存动作 (左边是动作右边是控制器)
.Remove("Remove", "Upload") // 删除
.AutoUpload(false) //这个是是否自动上传
)
.Events(es=>es.Select("onSelect")) //这个是上传控件的一个事件 当选择完图片时执行里边的一个JS 方法
)
<div id="show"> // 这个是存放显示图片的DIV
</div>
</div>
<script type="text/javascript">
function onSelect(e) {
var id = document.getElementById("show"); // 找见show这个div
var fileid = document.getElementById("files").files[0]; // 获取 名为 files 选择的文件的路径
var img = document.createElement("img"); // 创建一个图片标记
img.height = 100; // 设置img 得高为100px
var read = new FileReader(); // 这个是及时显示的重要部分 FileReader 获取图片的base64代码并预览
read.addEventListener("load", function () { // 监听 FileReader 的 load 事件 把它获取到的src 赋给 img 让 img 显示
img.src = read.result;
});
read.readAsDataURL(fileid);
id.appendChild(img); // 把创建的 img标签 添加到 show 这个 div里
}
</script>
Controller
public ActionResult Savesd(IEnumerable<HttpPostedFileBase> files) // 这个里边的参数是 列表的 HttppostedFileBase 用于放前台传过来的 文件
{
if(files!=null)
{
foreach (var file in files) // 遍历这个 files 把每一项放到 file 里
{
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("/Uploads"), fileName); // 把找见带Uploads 这个的 物理文件路径 和 上传的图片名 合二为一
file.SaveAs(physicalPath); // 保存
}
}
return Content("");
}
Kendo UI ASP.Net MVC 实现多图片及时显示加上传(其中有借鉴别人的代码,自己又精简了一下,如有冒犯,请多原谅!)的更多相关文章
- [转]ASP.net MVC 2 自定义模板来显示数据
本文转自:http://blog.163.com/liaojunbo@126/blog/static/1394892972012113104653651/ 在ASP.net MVC 2中,一个很有意思 ...
- Asp.Net MVC 文件管理Demo(文件展示,上传,下载,压缩,文件重命名等)
之前 ,有想做一个文件管理页面. 参考了 许多资料,终于完成了一个基于Asp.net MVC 的文件管理Demo.界面如下. 一,实现功能及相关技术 文件管理Demo基于Asp.NET MVC , ...
- ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据
要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <ang ...
- ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制
我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...
- ASP.NET MVC实现剪切图片
开发需要,我们需要对某一张图片进行剪切.就是说,获取图片某一区域.下面Insus.NET教大家轻便容易实现它. 首先写好一个处理函数,它建在MVC应用程序结构Utilities目录下: 准备好一张图片 ...
- 【ARK UI】HarmonyOS 从相册选择图片并显示到Image组件上
参考资料 [Harmony OS][ARK UI]ETS 上下文基本操作 [Harmony OS][ARK UI]ets使用startAbility或startAbilityForResult方式 ...
- 在Asp.Net MVC中实现上传图片并显示
实现思路大概分为两步: 1. 通过上传接口,将图片上传到服务器,返回文件路径给客户端: 2. 点击保存上传,将文件路径保存到数据库,如果是多张图片,路径用逗号分隔. 核心上传代码: /// <s ...
- ASP.NET MVC之Html.RenderAction(无操作方法 传参数)
WEB窗体模式开发惯了,切入MVC模式,好多东西都不懂,每一步都要查资料. 初步得来的一些知识点体会是: _Layout.cshtml就相当于母版页 然后partical视图(部分视图)就是用户控件. ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
随机推荐
- iOS 利用异常 NSException 调试代码
可以用在代码的调试上: -(instancetype)init{ @throw [NSException exceptionWithName:@"Singleton" reason ...
- easyui验证扩展
问题描述: 如上所示:当用户添加信息时,必须保证一个队伍一天只能有一条数据.所以在选择了报表日期的时候必须查询数据库里面当前队伍这一天的数据是否存在.如果不存在,即当前日期队伍没有数据,就可以进行数据 ...
- markdown学习经验
文章首发于我的github博客 前言 markdown是一种简洁有力的文本编辑语言.由于它十分好用,我将所有的博客都换成了markdown编辑器. 学习方法 工具为先,从工具中学习,熟能生巧. 工具选 ...
- 对于JAVA程序优化的一些想法,读书有感.治疗强迫症良药
在深入了解Java虚拟机里读到:在try{}块里面执行代码,比if(x!=null)效率要高,前提是被catch的几率很低的情况下. 但是 在Effective Java里读到:因为异常机制的设计初衷 ...
- Mac上使用selenium自动运行chrome
一.用我们的老朋友pip把selenium装好 pip install selenium 二.用webdriver.Chrome启动Chrome浏览器 from selenium import web ...
- shell脚本 字串截取 正则表达式
字串处理 子串截取方法一:使用${}表达式格式:echo ${x:起始位置:长度}(起始位置编号从0开始,可省略) 方法二:使用expr substr格式:expr substr "$x&q ...
- Tomcat启动过程源码解读
根据Tomcat源码来看一下Tomcat启动过程都做了什么 部分代码为主要流程代码,删去了try-catch以及一些校验逻辑,方便理解主流程 先来一张启动过程时序图,了解一下启动顺序 Tomcat启动 ...
- Caffe︱构建lmdb数据集、binaryproto均值文件及各类难辨的文件路径名设置细解
Lmdb生成的过程简述 1.整理并约束尺寸,文件夹.图片放在不同的文件夹之下,注意图片的size需要规约到统一的格式,不然计算均值文件的时候会报错. 2.将内容生成列表放入txt文件中.两个txt文件 ...
- mysql常用基础操作语法(九)~~外连接查询【命令行模式】
1.左外连接left outer join或者left jion,outer可以省略不写,下边的右连接和全连接也一样: 左外连接的意思是,以left join左边的表中的数据为基准,即左边的表中有的必 ...
- Hello China操作系统在Virtual PC上的安装和使用
http://blog.csdn.net/hellochina15/article/details/7253350 本文介绍如何在Windows 7操作系统和Virtual PC 2007虚拟机上安装 ...