asp.net-mvc - MVC 查看图像拖放功能
问题描述
我在 bootstrap 4 中有 mvc .net 核心项目,如您所见,图像功能运行良好,但是中心没有拖放功能,如果我尝试在“选择文件”上拖动图像,它可以工作但不能在中心所以你能帮我拖放功能吗?
我不希望代码上传,图像不应该上传到服务器端,还需要确保右侧有关闭按钮,该按钮应保持不变。
JavaScript
$('.img-wrap .close').on('click', function () {
var id = $(this).closest('.img-wrap').find('imgInp').data('id');
$('#imgInp').attr('src', '');
$("#file").val('');
});
CSS
.imgdrop {
height: 30px;
}
.img-wrap {
position: relative;
display: inline-block;
border: 1px red solid;
font-size: 0;
}
.img-wrap .close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background-color: #FFF;
padding: 5px 2px 2px;
color: #000;
font-weight: bold;
cursor: pointer;
opacity: .2;
text-align: center;
font-size: 22px;
line-height: 10px;
border-radius: 50%;
}
.img-wrap:hover .close {
opacity: 1;
}
HTML
@Html.Label("Image"@*, new { @class = "control-label col-md-2"}*@)
<div class="col-md-3">
<input type="file" id="file" name="file" class=" imgdrop" multiple="multiple" />
<div class="img-wrap">
<span class="close">×</span>
<img src="#" alt="Alternate Image" id="imgInp" width="200" height="200" />
</div>
</div>
解决方案
推荐阅读
- java - 如何从字节数组中提取数据([B 不能转换为 java.lang.Byte)
- ios - 使用 PushKit 有什么限制?
- workbox - 我在工作箱 PrecacheController.install 中遇到错误
- java - 如何在没有像 Maven 这样的构建器的情况下将 xml 文件添加到 intelliJ IDEA 中的类路径?
- c# - 列表中的 C# out 变量
- r - 在 data.table 中重新创建 dplyr 汇总
- java - 我对 java 和 c++ 之间的“引用”感到困惑
- python - Jupyter 不显示 api 的可用方法属性列表
- c# - 为什么 Xamarin.Form XAML 文件中 StackLayout 的子元素会出现在屏幕之外?
- matlab - 图像质量度量计算