File upload using AJAX instead of form submission

Question

I am trying to upload a file, using rich:fileUpload control, I am able to do so successfully too. The only problem I am facing here, is when I click on the upload button in the file upload control, the page gets submitted, which I am trying to avoid.

What I am trying to do, is as soon as the upload button is clicked, the listener is called which does necessary backend operations. And the section is refreshed where the picture is to be displayed. Everything is running fine but I want to do file uploading via AJAX.

I am using Richfaces 4.1

<rich:fileUpload addLabel="Add photo" clearAllLabel="Clear All" clearLabel="Clear"
    deleteLabel="Remove" doneLabel="Upload successful!"
    uploadLabel="Upload profile pic"
    fileUploadListener="#{studentProfile.fileUploadListener}"
    acceptedTypes="jpg, gif, png, bmp" noDuplicate="true" immediateUpload="false">
    <!-- <a4j:ajax event="uploadcomplete" render="validationButton"/> -->
    <!-- <a4j:ajax event="clear" listener="#{uploadBean.doClearFilesList}" render="validationButton"/> -->
            <a4j:ajax event="uploadcomplete" render="profilepic" immediate="true" />
</rich:fileUpload>



<a4j:outputPanel ajaxRendered="true" id="profilepic">
        <rich:panel header="Profile Picture" style="width: 100px;height: 100px">
    <h:graphicImage url="#{studentProfile.profilePictureURL}" width="100" height="100" />
        </rich:panel>
</a4j:outputPanel>

Answer 1

使用 h:commandlink 也将 iframe 名称作为目标，然后 on<click 操作调用一个字符串方法，该方法返回富人页面的 url，这样只会重新加载富人页面而不是主页....