一、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">