Загрузка картинок с предпросмотром

290
07 сентября 2017, 17:11

Здравствуйте. Интересует следующий вопрос. Каким образом с помощью java, spring, jsp, js, jquery реализовать загрузку и предпросмотр картинок?
На данный момент я реализовал это дело с помощью html5 fileapi, вот только возникает проблема. Превью изображений работает как нужно, но если вдруг другие поля формы заполнены неверно и срабатывает информирование об ошибках, превью картинок пропадает. Собственно задача состоит в том, чтобы превью было постоянным даже в вышеуказанном случае.
Интересует прежде всего механизм реализации и необходимые средства. Возможно кто-то поделится полезными ссылками на код.

Фрагмент разметки из JSP:

<li class="photo_li">
    <label class="input_label">
     Добавьте фото:
    </label>
    <div id="photo_div">
        <c:forEach var="v" varStatus="vs" items="${multiFileBucket.files}">
              <span class="photo">
                   <label class="label_for_photo">
                        <form:input type="file" path="files[${vs.index}].file" id="files[${vs.index}].file"/>
                        <span class="label_for_image_preview"></span>
                              <div class="has-error">
                                 <form:errors path="files[${vs.index}].file" class="error_label"/>
                              </div>
                   </label>
              </span>
        </c:forEach>
    </div>
</li>

Функция JS по выводу превью:

function handleFileSelectSingle(evt, text) {
var file = evt.target.files; // FileList object
var f = file[0]
// Only process image files.
if (!f.type.match('image.*')) {
    alert("Только изображения....");
    return;
}
else {
    var reader = new FileReader();
    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            // Render thumbnail.
            var span = document.createElement('span');
            span.innerHTML = ['<img class="label_for_image_preview" src="', e.target.result,
                '" title="', escape(theFile.name), '"/>'].join('');
            text.querySelector("span").innerHTML = "";
            text.querySelector("span").insertBefore(span, null);
        };
    })(f);
    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
}
}

Контроллер, обрабатывающий форму

@RequestMapping(value = "/add", method = RequestMethod.POST, produces = "text/plain;charset=UTF-8")
public String add(@Valid MultiFileBucket multiFileBucket, @Valid @ModelAttribute("addapplicationdto") AddApplicationDTO appl, BindingResult result) throws IOException {
    if (result.hasErrors()) {
        return "add_zayavka";
    } else {
        int fileNumber = 1;
        for (FileBucket bucket : multiFileBucket.getFiles()) {
            if (bucket.getFile().getSize() == 0) {
                continue;
            }
            else {
                FileCopyUtils.copy(bucket.getFile().getBytes(), new File(UPLOAD_LOCATION + fileNumber+".jpg"));
                fileNumber++;
            }
        }
        return "zayavka_podana";
    }
}
Answer 1

Нет надобности в загрузке картинки сразу. Когда вы вставляете картинку в превью, в атрибуте src вашего img. записывается картинка в виде base64. Можно когда человек выбирает картинку записывать в localStorage ну или куки. И если возникнет ошибка то взять данные оттуда и подставить. А саму загрузку файла выполнять при успешной проверке данных формы.

Ещё как вариант разделить всё на два запроса (знаю что не очень, но мороки меньше). Сначала проверить форму и записать данные и ответ от сервера положительный выполнить загрузку картинки.

READ ALSO
Не работает jstl в простом веб-приложение

Не работает jstl в простом веб-приложение

Ребят, помогите справится с jstl, 3 дня бьюсь, все перепробывала безрезультатноВообщем не дается мне jstl, а именно не выводит список прописанный...

402
все время вызывается onLoadFinished

все время вызывается onLoadFinished

Использую ViewPager (FragmentStatePagerAdapter) с фрагментамиДля загрузки данных у фрагмента использую AsyncTaskLoader, загрузка которого стартует в onCreate()

309
Как преобразовать String в Date?

Как преобразовать String в Date?

Есть две строки на русском языке:

415
Что лучше использовать для back end-a на java? [требует правки]

Что лучше использовать для back end-a на java? [требует правки]

Что лучше использовать для back end-a на java, если он будет использоваться под web и mobile appИ на сколько хорошо для этого подходит java? Или может есть...

331