Эти шаги я хочу сделать:
- получить изображение из папки и просмотреть пользователя
- сохранить изображение
- после этого, чтобы обновить изображение, получить изображение и предварительный просмотр из базы данных
- Теперь хочу изменить изображение, которое находится в папке моего окна
Код:
<div class="form-group">
@Html.LabelFor(model => model.ScreenShot,"Browse", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="panel panel-body" style="min-height:256px">
<div class="col-md-9">
<div class="col-md-4">
<div class="btn btn-primary" >
<input type="file" id="file" accept="image/*" onchange="loadFile(event)" >
</div>
<img src="@Url.Content(@imagepath)" id="output" style="width: 200px; height: 200px;" />
<hr />
<div id="imgPreview" class="thumbnail" >
<img class="img-responsive" id="targetImg" />
<div class="caption">
<a href="#" onclick="ClearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
<span id="description"></span>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
@*image preview*@
<script>
var loadFile = function (event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
var ClearPreview = function () {
$('img').attr('src', '');
//$("#imgPreview").hide();
//$("#description").text('');
//$("#imgPreview").hide();
};
</script>
}