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("");
}