Используйте dropzone с JSF

Я хотел бы знать, как использовать dropzone.js с JSF для загрузки файла. В документации (http://www.dropzonejs.com/#usage) он говорит, что использование dropzone похоже на использование:

   <input type="file" name="file" />

Но я не знаю, как реализовать серверную часть в JSF, чтобы получить файл и сохранить его на диске.

 BalusC24 июн. 2016 г., 21:05
Просто используйте<h:inputFile>? Он генерирует именно этот HTML.
 Aliuk24 июн. 2016 г., 21:56
Вы можете видеть это здесьcolorlib.com/polygon/gentelella/form_upload.html
 Aliuk24 июн. 2016 г., 21:11
Но h: inputFile не имеет индикатора выполнения, а у dropzone есть.

Ответы на вопрос(1)

Решение Вопроса

Похоже, вы не совсем понимаете, что JSF в контексте этого вопроса является просто генератором HTML-кода. JSF предлагает<h:inputFile> компонент, который генерирует HTML<input type="file"> элемент.

Попробуй сам:

<h:form id="uploadForm" enctype="multipart/form-data">
    <h:inputFile id="file" value="#{bean.file}" />
    <h:commandButton id="submit" value="submit" />
</h:form>

Если вы откроете страницу JSF в веб-браузере и сделаете правый клик иПросмотр исходной страницытогда вы должны увидеть что-то вроде этого:

<form id="uploadForm" name="uploadForm" method="post" action="/playground/test.xhtml" enctype="multipart/form-data">
    <input type="hidden" name="uploadForm" value="uploadForm" />
    <input id="uploadForm:file" type="file" name="uploadForm:file" />
    <input type="submit" name="uploadForm:submit" value="submit" />
    <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="3646344859491704387:-5449990057208847169" autocomplete="off" />
</form>

Смотри, есть твой<input type="file"> элемент!

Теперь, если мы настроим Dropzone согласноего документация (и вы устанавливаетеdropzone.js файл в вашем проекте JSF в соответствии с инструкциями вКак ссылаться на ресурс CSS / JS / изображения в шаблоне Facelets?), тогда мы должны оказаться на странице JSF примерно так:

<h:head>
    ...
    <h:outputScript name="dropzone.js" />
    <h:outputScript>Dropzone.options.uploadForm = { paramName: "uploadForm:file" };</h:outputScript>
</h:head>
<h:body>
    <h:form id="uploadForm" enctype="multipart/form-data" styleClass="dropzone">
        <div class="fallback">
            <h:inputFile id="file" value="#{bean.file}" />
            <h:commandButton id="submit" value="submit" />
        </div>
    </h:form>
</h:body>

Боб выглядит так:

@Named
@RequestScoped
public class Bean {

    private Part file;

    public void save() throws IOException {
        String fileName = file.getSubmittedFileName();
        String contentType = file.getContentType();
        long size = file.getSize();
        InputStream content = file.getInputStream();
        // ...
    }

    public Part getFile() {
        return file;
    }

    public void setFile(Part file) throws IOException {
        this.file = file;
        save();
    }

}

Есть три вещи, которые следует учитывать с JSF:

ДропзонаparamName параметр должен быть установлен точноname из сгенерированного<input type="file"> элемент, который являетсяuploadForm:file в приведенном выше примере.Входной файл JSF и компоненты командной кнопки должны быть обернуты в элемент с привязкой к Dropzoneclass="fallback" чтобы быть скрытым (и предоставить запасной вариант для клиентов с дефицитом JavaScript / Ajax). Делатьне удалите их, в противном случае JSF откажется обрабатывать загруженный файл, потому что он должен выполнять свою работу на основе дерева компонентов.save() Метод вызывается непосредственно установщиком. Это немного подозрительно, но поскольку Dropzone не предоставляет возможности напрямую активировать метод поддержки бина, это самый простой обходной путь. Другим обходным решением является прикреплениеvalueChangeListener на<h:inputFile> и поставить событие в очередьINVOKE_APPLICATION фаза согласноКак получить обновленные значения модели в методе valueChangeListener?

Ваш следующий вопрос, вероятно, будет"Как я должен сохранить это?", В этом случае продолжите здесь:

Как сохранить загруженный файл в JSFРекомендуемый способ сохранения загруженных файлов в приложении сервлета
 BalusC24 июн. 2016 г., 23:08
Просто добавь<h:inputHidden value="#{album.id}" /> обычный способ.
 Aliuk25 июн. 2016 г., 00:58
Извините, но я не могу получить идентификатор альбома. Я использую это: <h: inputHidden name = "hiddenAlbumId" value = "# {album.id}" /> и String albumId = FacesContext.getCurrentInstance (). GetExternalContext (). GetRequestParameterMap (). Get ("hiddenAlbumId") ; но это не работает, я всегда получал ноль
 BalusC25 июн. 2016 г., 16:05
Просто задайте новый вопрос. Эта деталь нигде не освещалась в вопросе в его нынешнем виде. Я понятия не имею, о каком контексте ты говоришь. Ответ работает на вопрос в его нынешнем виде. Или не так ли?
 sinclair27 окт. 2016 г., 13:35
@BalusC Я выполнил шаги, упомянутые выше, но когда я перетаскиваю файл в зону сброса, вызывается метод получения, а не метод установки. На самом деле сеттер никогда не вызывается. У вас есть идеи, что может вызвать такое поведение?
 BalusC27 окт. 2016 г., 13:38
@sinclair: извините, проблема не видна в информации, предоставленной до сих пор. Возможно, вы не пробовали в проекте блокнота.
 Aliuk24 июн. 2016 г., 22:57
Если мне нужно передать параметр в метод сохранения, как я могу это сделать? Мне нужно передать # {album.id}

Ваш ответ на вопрос