Моя компания столкнулась с той же проблемой, и мы разработали способ использования компонента без fla sh с несколькими загрузками. Следуйте коду. Обычно javascript принимает несколько файлов на входе и отправляет их в очереди в расширенный компонент, моделирующий множественную загрузку.
arquivo. js
var files = []
function FileListItem(a) {
a = [].slice.call(Array.isArray(a) ? a : arguments)
for (var c, b = c = a.length, d = !0; b-- && d;)
d = a[b] instanceof File
if (!d)
throw new TypeError(
"expected argument to FileList is File or array of File objects")
for (b = (new ClipboardEvent("")).clipboardData || new DataTransfer; c--;)
b.items.add(a[c])
return b.files
}
function docUpload(f) {
// Popula files
for (var i = 0; i < jQuery("#fUpload")[0].files.length; i++) {
files[i] = jQuery("#fUpload")[0].files[i]
}
if (files.length > 0) {
//just a loading modal not nedded
document.getElementById('loading_mp').component.show();
file = files[0]
files.splice(0, 1)
upload(file);
} else {
//just a loading modal not nedded
document.getElementById('loading_mp').component.hide();
}
}
function upload(file) {
console.log('Starting Upload ')
jQuery(".rich-fileupload-hidden")[0].files = FileListItem([ file ])
jQuery(".rich-fileupload-hidden").change();
console.log('End ')
}
function uploadMult() {
if (files.length > 0) {
file = files[0]
files.splice(0, 1)
upload(file);
} else {
jQuery("#fUpload")[0].files = null
document.getElementById('loading_mp').component.hide();
}
}
<style type="text/css">
#fileUploadSingle {
float: left;
border: none;
}
.rich-fileupload-list-decor {
display: none;
}
#fileUploadSingle table.rich-fileupload-toolbar-decor {
border: none;
!
important
}
/* Esconde o input */
#fUpload {
display: none
}
/* Aparência que terá o seletor de arquivo */
.labelInputFile {
background-color: #3498db;
border-radius: 5px;
color: #fff;
cursor: pointer;
margin: 10px;
padding-left: 20px;
padding-right: 20px !important;
padding-top: 6px;
padding-bottom: 6px;
}
</style>
<a4j:jsFunction name="doOnUpload" action="#{documentoBean.onUpload}" />
<label class="labelInputFile" for='fUpload'>Select File »</label>
<input id="fUpload" type="file" onchange="docUpload(this)" multiple="multiple" />
<br/><br/>
<rich:fileUpload fileUploadListener="#{documentoBean.listener}"
id="upload" autoclear="true" immediateUpload="true"
clearAllControlLabel="Limpar" addControlLabel="Adicionar"
maxFilesQuantity="30" allowFlash="false" ajaxSingle="true"
listHeight="60" listWidth="700" onupload="doOnUpload(event)" >
<a4j:support event="onfileuploadcomplete" reRender="list" ignoreDupResponses="true"
oncomplete="uploadMult()" />
</rich:fileUpload>
PS:
doOnUpload not required
On Bean:
public void listener(UploadEvent event) throws Exception {
event.getUploadItem().getFile();
event.getUploadItem().getFileName();
}
public void onUpload() {
this.msgList.clear();
}