RichFaces FileUpload 和 Flash 支持将于 2020 年结束答案

【问题标题】：RichFaces FileUpload and Flash Support ending in 2020RichFaces FileUpload 和 Flash 支持将于 2020 年结束
【发布时间】：2020-08-20 04:10:24
【问题描述】：

嗯，在我的公司，我们有一个使用 JSF 1.2、Seam 2.2 和 RichFaces 3.3 的旧版 Web 系统

嗯，系统的一部分使用了 Rich:fileUpload 和 FlashSupport，但我们知道到 2020 年底将不再支持 Flash。

问题是：有什么方法可以改变这种情况，而不是将系统迁移到新的技术？（这肯定会完成，但可能只有在 2021 年）。

提前致谢。拉斐尔

【问题讨论】：

好吧，fileUpload 可以在没有 Flash 的情况下工作。话虽如此，RF 3 已经近十年不支持了，为什么 Flash 更让你担心？
jsf 2.3 和 PrimeFaces 是新的 html5/css3 技术

标签： flash richfaces jsf-1.2

【解决方案1】：

我的公司也遇到了同样的问题，我们开发了一种方法来使用该组件，无需 Flash 并进行多次上传。按照代码。基本上，javascript 会在输入中获取多个文件，并将其发送到队列中的丰富组件，以模拟 multipload。

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 &#187;</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();
    }

【讨论】：