У меня есть следующий код в html и css, и я хочу использовать jquery для показа изображения, загруженного в классы предварительного просмотра.
Как это сделать?
Кроме того, как я могу удалить загруженные изображения?
HTML
<form id="myform">
<div class="preview">
<span class="btn_upload">
<input type="file" multiple id="imag" title="" />
Add
</span>
</div>
<div class="preview">
<span class="btn_upload">
<input type="file" multiple id="imag" title="" />
Add
</span>
</div>
</form>
CSS
.btn_upload {
cursor:pointer;
display:inline-block;
overflow:hidden;
position:relative;
margin-top:10px;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-box-shadow:inset 0 1px 0 0 #abbeef;
-webkit-box-shadow:inset 0 1px 0 0 #abbeef;
box-shadow:inset 0 1px 0 0 #abbeef;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a72d4',endColorstr='#1160b8');
background-color:#2a72d4;
border:1px solid #166b8a;
padding:5px 10px;
}
.btn_upload input {
cursor:pointer;
height:100%;
position:absolute;
filter:alpha(opacity=1);
-moz-opacity:0.01;
opacity:0.01;
}
.preview {
width:120px;
height:100px;
border:1px solid red;
margin-right:10px;
float:left;
}
спасибо для ответа.
Я рекомендую вам не иметь несколько элементов управления с одинаковым идентификатором. Используйте img-элемент управления для рендеринга изображения, а элемент управления img будет использовать класс предварительного просмотра.
Так я обычно это делаю:
Разметка:
<form id="myform">
<div class="preview">
<span class="btn_upload">
<input type="file" multiple id="imag" title="" />
Add
</span>
<img id="ImgPreview" src="#" class="preview" />
</div>
<div class="preview">
<span class="btn_upload">
<input type="file" multiple id="imag2" title="" />
Add
</span>
</div>
</form>
Код JQuery:
$("#imag").change(function () {
// add your logic to decide which image control you'll use
var imgControlName = "#ImgPreview";
readURL(this, imgControlName);
});
function readURL(input, imgControlName) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgControlName).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Вот ваша скрипка изменена: http://jsfiddle.net/J24yN/2/
Обратите внимание, что я сделал это только для первого загрузчика, но вы можете легко расширить код до нескольких загрузчиков.
РЕДАКТИРОВАТЬ:
Я обновил свой ответ, чтобы добавить логику удаления изображения. Опять же, вам нужно добавить свою собственную логику, чтобы выбрать фактическое изображение, которое вы хотите удалить, если у вас разные элементы управления: