Предварительный просмотр загружен в jquery

0

У меня есть следующий код в html и css, и я хочу использовать jquery для показа изображения, загруженного в классы предварительного просмотра.

Как это сделать?

Кроме того, как я могу удалить загруженные изображения?

jsFiddle Demo

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;
}

спасибо для ответа.

  • 2
    Более актуальным, чем весь ваш CSS, является ваш скрипт загрузки.
  • 0
    Я просто хочу, чтобы код отображал изображение в классе предварительного просмотра
Теги:

1 ответ

1
Лучший ответ

Я рекомендую вам не иметь несколько элементов управления с одинаковым идентификатором. Используйте 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/

Обратите внимание, что я сделал это только для первого загрузчика, но вы можете легко расширить код до нескольких загрузчиков.

РЕДАКТИРОВАТЬ:

Я обновил свой ответ, чтобы добавить логику удаления изображения. Опять же, вам нужно добавить свою собственную логику, чтобы выбрать фактическое изображение, которое вы хотите удалить, если у вас разные элементы управления:

http://jsfiddle.net/J24yN/4/

  • 0
    Спасибо. Можете написать более компактно для моей демонстрации или нет? И как я могу удалить выбранное изображение? jsfiddle.net/J24yN/3
  • 0
    Смотрите мой обновленный ответ

Ещё вопросы

Сообщество Overcoder
Наверх
Меню