8

詳細モードと自動モードでPrimefacesfileUploadプログレスバーとボタンを非表示にする方法はありますか？

これが私が使用しているコードです：

<p:fileUpload id="scriptUpload" 
                        widgetVar="importDevicesWidget" 
                        fileUploadListener="#{scriptUploadBean.handleFileUpload}"
                        auto="true"
                        label="Choose.."
                        mode="advanced" 
                        update=":infoMessages"
                        sizeLimit="8192" 
                        allowTypes="/(\.|\/)(txt)$/"
                        onstart="clearInvalidFileMsg();$('#progress').show();"
                        oncomplete="clearInvalidFileMsg();$('#progress').hide();importDevicesDialogWidget.hide()"/>

問題は、モードが自動であるため、アップロードがすでに開始されているため、各ファイルの進行状況バーの横に表示されるボタンが表示されても意味がないことです。

スクリーンショットは次のとおりです。

ここに画像の説明を入力してください

4

5 に答える 5

13

3.4のドキュメント.ui-fileupload .startによると、ファイルアップロードの開始、キャンセル、進行状況バー.ui-fileupload .cancelを.ui-fileupload .progress選択します。

<style type="text/css">
    .ui-fileupload .start {
        display: none;
    }
    .ui-fileupload .cancel {
        display: none;
    }
    .ui-fileupload .progress {
        display: none;
    }
</style>
于 2012-11-03T10:58:12.677 に答える
3

PrimeFaces 5の場合、これはおそらく解決策です（atmを使用）

.fileupload-simple > .ui-fileupload-content {
    display: none;
}
.fileupload-simple > .ui-fileupload-buttonbar {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

次にfileupload-simple、コンポーネントでクラスを使用するfileUploadと、準備が整います:)

于 2014-08-06T16:10:25.080 に答える
2

私のために働く。Primefaces 6.0.1

 <style type="text/css">
    .ui-fileupload-content .ui-progressbar {
    width: 0px;
    height: 0px;
    margin: 0
    }
    </style>
于 2016-08-01T11:06:13.643 に答える
1

まあ、私は自分の質問に答えることができるときにそれが大好きです：

更新されたコードは次のとおりです。

<p:dialog appendToBody="true" id="importDevices" widgetVar="importDevicesDialogWidget" header="Import Devices" resizable="false" modal="true" onShow="centerDialog('#importDevicesDialog');">
            <h:form id="importDevicesForm" enctype="multipart/form-data">
                <h:panelGrid columns="1" cellpadding="5">
                    <p:fileUpload id="scriptUpload" 
                        widgetVar="importDevicesWidget" 
                        fileUploadListener="#{scriptUploadBean.handleFileUpload}"
                        auto="true"
                        label="Choose.."
                        mode="advanced" 
                        update=":infoMessages"
                        sizeLimit="8192" 
                        allowTypes="/(\.|\/)(txt)$/"
                        onstart="clearInvalidFileMsg();$('#progress').show();"
                        oncomplete="clearInvalidFileMsg();$('#progress').hide();importDevicesDialogWidget.hide()"/> 
                    <p:spacer height="10px;"/>
                    <p:commandButton value="Cancel" action="javascript.void(0);" onclick="clearInvalidFileMsg();importDevicesDialogWidget.hide();"/>
                </h:panelGrid>
             </h:form>
        </p:dialog>

そして、プログレスバーとボタンを非表示にし、エラーをクリアする更新された関数は次のとおりです。

function clearInvalidFileMsg(){
                if ($("#importDevicesForm").is(':visible')){
                    importDevicesWidget.uploadContent.find("tr.ui-state-error").remove();
                    importDevicesWidget.uploadContent.find("td.progress").remove();
                    importDevicesWidget.uploadContent.find("td.start").remove();
                    importDevicesWidget.uploadContent.find("td.cancel").remove();                        
                }
            }
于 2012-11-02T21:30:13.247 に答える
-1

fileUploadタグでshowButtons="false"を使用します。

例えば：

 <p:fileUpload	id="fileUpload" mode="advanced"	dragDropSupport="false"	update="@form" sizeLimit="100000" 	fileLimit="3" allowTypes="/(\.|\/)(xlsx|xls)$/"	 multiple="false" label="Select File" showButtons="false"/>

于 2017-12-18T14:31:13.087 に答える