0

Primefacesを使用して、写真をアップロードするために次のスニペットを使用しています。

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
    <h:outputText value="PrimeFaces Single Upload"  />
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
            update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
            invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
            invalidFileMessage="You are allowed to upload only images !" />
        <p:growl id="messages" showDetail="true" sticky="true" />

index.xhtml次のコマンドを使用しているメインページに追加しているこの構成： <ui:include src="upload_img_form.xhtml" />。

メインページは次のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
    <script type="text/javascript" src="js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
    <div id="container" class="container ">
        <ui:include src="upload_img_form.xhtml" />
    </div>
</h:body>
</html>

私は次の問題を抱えています：

  • プログレスバーが機能しない、
  • キャンセルボタンが機能せず、最大の問題は、入力として指定されたファイルを検証しないsizeLimitです。
  • これは自動アップロードではありませんが、前に[アップロード]ボタンをクリックしなくても、ファイルは自動アップロードされます。

問題はセクションに100％関連してheadいます。これを削除すると、機能するからです。ただし、同じページの他の機能では機能しないため、jsファイルとを保持する必要がありますstyles。

ご返信ありがとうございます。

4

1 に答える 1

1

手動で含まれているjQueryを取り除きます。PrimeFacesはすでに独自のコピーを自動インクルードしています。それらが異なるバージョンである場合、それは競合するだけであり、すべての色でJS関連の問題が発生します。ブラウザの開発者ツールセットでJSコンソールをチェックしておけば気づいたでしょう。

于 2013-02-19T12:41:00.583 に答える