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 实现多图片及时显示加上传(其中有借鉴别人的代码,自己又精简了一下,如有冒犯,请多原谅!)的更多相关文章

  1. [转]ASP.net MVC 2 自定义模板来显示数据

    本文转自:http://blog.163.com/liaojunbo@126/blog/static/1394892972012113104653651/ 在ASP.net MVC 2中,一个很有意思 ...

  2. Asp.Net MVC 文件管理Demo(文件展示,上传,下载,压缩,文件重命名等)

    之前 ,有想做一个文件管理页面. 参考了 许多资料,终于完成了一个基于Asp.net MVC 的文件管理Demo.界面如下.   一,实现功能及相关技术 文件管理Demo基于Asp.NET MVC , ...

  3. ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据

    要求是这样子的,在一个列表页中,用户点击详细铵钮,带记录的主键值至另一页.在另一外页中,获取记录数据,然后显示此记录数据在网页上. 先用动图演示: 昨天有分享为ng-click传递参数 <ang ...

  4. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  5. ASP.NET MVC实现剪切图片

    开发需要,我们需要对某一张图片进行剪切.就是说,获取图片某一区域.下面Insus.NET教大家轻便容易实现它. 首先写好一个处理函数,它建在MVC应用程序结构Utilities目录下: 准备好一张图片 ...

  6. 【ARK UI】HarmonyOS 从相册选择图片并显示到Image组件上

    ​ 参考资料 [Harmony OS][ARK UI]ETS 上下文基本操作 [Harmony OS][ARK UI]ets使用startAbility或startAbilityForResult方式 ...

  7. 在Asp.Net MVC中实现上传图片并显示

    实现思路大概分为两步: 1. 通过上传接口,将图片上传到服务器,返回文件路径给客户端: 2. 点击保存上传,将文件路径保存到数据库,如果是多张图片,路径用逗号分隔. 核心上传代码: /// <s ...

  8. ASP.NET MVC之Html.RenderAction(无操作方法 传参数)

    WEB窗体模式开发惯了,切入MVC模式,好多东西都不懂,每一步都要查资料. 初步得来的一些知识点体会是: _Layout.cshtml就相当于母版页 然后partical视图(部分视图)就是用户控件. ...

  9. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

随机推荐

  1. Deep Learning for Information Retrieval

    最近关注了一些Deep Learning在Information Retrieval领域的应用,得益于Deep Model在对文本的表达上展现的优势(比如RNN和CNN),我相信在IR的领域引入Dee ...

  2. 测试任务汇总v1.0

    2017.08.04 整理了目前我们所在团队需要做的日常任务 定义为v1.0

  3. 老男孩Python全栈开发(92天全)视频教程 自学笔记18

    day18课程内容: os模块 import osprint(os.getcwd())#D:\untitled\练习题 获取当前工作目录os.chdir(r'D:\untitled\练习题\16.1切 ...

  4. 轻松掌握VS Code开发.Net Core及创建Xunit单元测试

    前言 本篇文章主要还是介绍使用 VS Code 进行.Net Core开发和常用 CLI命令的使用,至于为啥要用VS Code ,因为它是真的是好看又好用 :) ,哈哈,主要还是为了跨平台开发做准备. ...

  5. CodeForces - 727E Games on a CD 字符串Hash

    题意:有n个单词,每个单词长度为k,顺时针将它们写成一个圆圈串.现在知道g个长度为k的单词,是否可以从这g个单词中选择n个形成这个圆圈串?如果有多个答案,任意输出一个. 思路 可以发现,如果枚举第一个 ...

  6. Caffe可视化之VisualDL

    Visual DL是由 PaddlePaddle 和 ECharts 合作推出的一款深度学习可视化工具,其能够可视化scalar.参数分布.模型结构.图像等.底层采用C++编写,上层SDK以pytho ...

  7. vim编辑器——常用操作整理

    注意:以下的操作都是在命令状态下进行的,不要进入插入状态了.参考这里 1.删除 dd       删除一行 ndd    删除以当前行开始的n行dw    删除以当前字符开始的一个字符ndw   删除 ...

  8. 【其他】3dmax撤销Ctrl+z不能用的解决办法

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/3dmax_ctrlz.html 如果你经常去网上下载各种模型参考学习的话,出现这个问题的概率会非常高.因为出现这个 ...

  9. qwe框架- CNN 实现

    CNN实现 概述 我在qwe中有两种,第一种是按照Ng课程中的写法,多层循环嵌套得到每次的"小方格",然后WX+b,这样的做法是最简单,直观.但是效率极其慢.基本跑个10张以内图片 ...

  10. linux驱动---字符设备的注册register_chrdev说起

    首先我们在注册函数里面调用了register_chrdev(MEM_MAJOR,"mem",&memory_fops),向内核注册了一个字符设备. 第一个参数是主设备号,0 ...