FileUpload 上傳下載檔案相容IE8

阿新 • • 發佈：2018-12-31

專案上使用FileUpload 上傳附件，樣式比較簡單，功能也比較簡單。簡單的封裝了一下

function AttachComponent(field, instanceId, value) {
	this.field = field;
	this.fieldName = this.field.name;
	this.fieldId = "id-" + Math.random() * 10e18 + "-" + this.fieldName;
	this.showName = this.field.showName;
	this.instanceId = instanceId;
	this.value = value;
	this.initializeDom();
}

AttachComponent.prototype.initializeDom = function() {
	var renderType = getFormInstanceRenderType();
	if (renderType == 'CREATE') {
		this.createDom();
	} else if (renderType == 'EDIT') {
		this.editDom();
	} else {
		this.approveDom();
	}
	// this.brush();
};

AttachComponent.prototype.getDom = function() {
	return this.dom;
};

AttachComponent.prototype.createDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml.append("<div style='clear:both;padding-top:5px;'>");
	domHtml.append("<div class='easyui-panel' title='附件上傳' > ");
	domHtml
			.append("<table cellspacing='0' cellpadding='0' style='border: 0px;padding:5px'>");
	domHtml.append("<tr style='height:25px'>");
	domHtml.append("<th><label for='Attachment_GUID'>附件上傳：</label></th><td>");
	domHtml.append("<div>");
	domHtml
			.append("<input class='easyui-validatebox' type='hidden' id='Attachment_GUID' name='Attachment_GUID' />");
	domHtml.append("<input id='" + this.fieldId
			+ "' name='file' type='file' multiple='multiple'>");
	domHtml
			.append("<a href='javascript:void(0)' class='easyui-linkbutton' id='btnUpload' data-options='plain:true,iconCls:\"icon-save\"' onclick='AttachComponent.prototype.ajaxFileUpload(\""
					+ this.fieldId + "\")'>上傳</a>");
	domHtml.append("<div id='fileQueue' class='fileQueue'></div>");
	domHtml.append("<div id='div_files'></div>");
	domHtml.append("<br />");
	domHtml.append("</div>");
	domHtml.append("</td>");
	domHtml.append("</tr></table>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());

	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上傳列表資訊',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true
//									formatter : function(value, row, index) {
//										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '檔名稱',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上傳路徑',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上傳人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上傳時間',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]
					});

};
AttachComponent.prototype.editDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml.append("<div style='clear:both;padding-top:5px;'>");
	domHtml.append("<div class='easyui-panel' title='附件上傳' > ");
	domHtml
			.append("<table cellspacing='0' cellpadding='0' style='border: 0px;padding:5px'>");
	domHtml.append("<tr style='height:25px'>");
	domHtml.append("<th><label for='Attachment_GUID'>附件上傳：</label></th><td>");
	domHtml.append("<div>");
	domHtml
			.append("<input class='easyui-validatebox' type='hidden' id='Attachment_GUID' name='Attachment_GUID' />");
	domHtml.append("<input id='" + this.fieldId
			+ "' name='file' type='file' multiple='multiple'>");
	domHtml
			.append("<a href='javascript:void(0)' class='easyui-linkbutton' id='btnUpload' data-options='plain:true,iconCls:\"icon-save\"' onclick='AttachComponent.prototype.ajaxFileUpload(\""
					+ this.fieldId + "\")'>上傳</a>");
	domHtml.append("<div id='fileQueue' class='fileQueue'></div>");
	domHtml.append("<div id='div_files'></div>");
	domHtml.append("<br />");
	domHtml.append("</div>");
	domHtml.append("</td>");
	domHtml.append("</tr></table>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());

	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上傳列表資訊',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true,
//									formatter : function(value, row, index) {
//										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '檔名稱',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上傳路徑',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上傳人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上傳時間',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]
					});
	this.uploadList = {};
	this.uploadList.Dom = dom.find('#uploadFileList');
	var uploadListData = this.value;
	this.uploadList.Dom.datagrid('loadData', []);
	this.uploadList.Dom.datagrid('loadData', uploadListData);
};
AttachComponent.download = function(id) {
	window.location.href = getWebContext() + "/api/file/download?fileId=" + id;
};

AttachComponent.prototype.approveDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml
			.append("<div style='clear:both;padding:5px 3px 5px 0px;width:99%;clear:both;height:auto;'>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());
	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上傳列表資訊',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true
//									formatter : function(value, row, index) {
//										return "<a href='#' class='' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '檔名稱',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上傳路徑',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上傳人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上傳時間',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]

					});

	this.uploadList = {};
	this.uploadList.Dom = dom.find('#uploadFileList');
	var uploadListData = this.value;
	this.uploadList.Dom.datagrid('loadData', []);
	if (uploadListData && uploadListData.length > 0) {
		this.uploadList.Dom.datagrid('loadData', uploadListData);
	}
};


AttachComponent.prototype.ajaxFileUpload = function(fieldId) {
	var uploadUrl = getWebContext() + '/api/file/upload';

	$.ajaxFileUpload({
		url : uploadUrl,// 用於檔案上傳的伺服器端請求地址
		secureuri : false,// 一般設定為false
		type : 'post',
		fileElementId : fieldId,// 檔案上傳空間的id屬性 <input type="file" id="file"
								// name="file" />
		dataType : 'json', // 返回值型別 一般設定為json
		success : function(data, status) { // 伺服器成功響應處理函式
			if (data) {
				var rows = $("#uploadFileList").datagrid("getRows");
				var index = rows.length;
				var obj = data.file;
				$('#uploadFileList').datagrid('insertRow', {
					index : (index + 1),
					row : {
						id : obj.id,
						fileName : obj.fileName,
						filePath : obj.filePath,
						createBy : obj.createBy,
						creatTime : obj.creatTime
					}
				});
			} else {
				alert("新增失敗！");
			}
		},
		error : function(data, status, e) {
			/** 伺服器響應失敗處理函式* */
			alert(e);
		}
	});
};
AttachComponent.prototype.processData = function() {
	var self = this;
	var dom = this.getDom();
	var uploadList = [];
	var dataList = dom.find("#uploadFileList").datagrid('getData').rows;
	if (dataList != undefined && dataList != null) {
		for ( var i = 0; i < dataList.length; ++i) {
			if (dataList != null)
				uploadList.push(dataList[i]);
		}
		return JSON.stringify(uploadList);
	} else {
		return "[]";
	}

};

附件上傳功能還可以，但在IE和谷歌還會有一些問題。

FileUpload 上傳下載檔案相容IE8

專案上使用FileUpload 上傳附件，樣式比較簡單，功能也比較簡單。簡單的封裝了一下 function AttachComponent(field, instanceId, value) { this.field = field; this.fieldName =

經測試能用springmvc的檔案上傳下載並解決ie8檔案上傳後提示下載

這兩天領導讓寫一個檔案上傳下載的功能，由於是新手，忙了一天查資料，終於搞定了，經過測試了，給各位看一下，共同學習一、先寫測試好的上傳功能首先是實體類 @Data public class FileUpload { private byte[] bytes; //

linux利用scp遠端上傳下載檔案/資料夾

scp是secure copy的簡寫，用於在Linux下進行遠端拷貝檔案的命令，和它類似的命令有cp，不過cp只是在本機進行拷貝不能跨伺服器，而且scp傳輸是加密的。可能會稍微影響一下速度。當你伺服器硬碟變為只讀 read only system時，用scp可

webdriver API：上傳下載檔案

上傳檔案普通上傳：將本地檔案的路徑作為一個值放在input標籤中，通過form表單提交的時候將這個值提交給伺服器上傳的輸入框標籤必須為input #送一個檔案的絕對路徑到上傳輸入框 dr.find_element_by_name('file').send_keys('D:\\uplo

springboot上傳下載檔案（3）--java api 操作HDFS叢集+叢集配置

只有光頭才能變強! 前一篇文章講了nginx+ftp搭建獨立的檔案伺服器但這個伺服器宕機了怎麼辦？我們用hdfs分散式檔案系統來解決這個問題（同時也為hadoop系列開個頭）目錄 1、Ubuntu14.04下配置Hadoop(2.8.5)叢集環境詳解(完全分

Windows環境在cmd中使用ftp上傳下載檔案檢視端口占用情況

cmd使用端口占用 ftp上傳下載檔案上傳下載端口占用有時候在執行一些開發工具的時候經常會碰到埠被佔用的情況，比如adb執行埠被其它流氓軟體佔用，解決方法如下開啟執行彈窗，輸入cm

SSH 上傳下載檔案

以前一直在windows下用SSH Secure Shell連線遠端伺服器，它自帶了一個視覺化的檔案傳輸工具，跟ftp差不多但是它也存在一個缺陷，不支援編碼的選擇，遇到utf8就自動亂碼了，另外mac下也沒有這個工具在mac下我用終端登入上去之後，想傳個檔案上去就犯愁了，難不成要開個ftp？

阿里雲伺服器 ---- 上傳下載檔案

1.xshell 使用xshell來操作服務非常方便，傳檔案也比較方便。就是使用rz（上傳），sz（下載）首先，伺服器要安裝了rz，sz 伺服器執行 yum install lrzsz 2.兩個伺服器之間傳輸檔案使用scp命令

Android xutil上傳下載檔案

1.在build.gradle下加入compile 'org.xutils:xutils:3.5.0' 2.在AndroidManifest.xml下加入許可權 <uses-permission android:name="android.permission.INTERNET" /&

初步使用github,並上傳下載檔案

使用GitHub需要先註冊GitHub的賬號,登陸進去然後開始建立專案 start a project 建立完成,開始生成公私鑰,可以不必每次都要輸密碼 ssh-keygen -t rsa -C "[email protected]" //填寫email

Struts框架上傳下載檔案輔助類，簡單實現Struts上傳圖片以及下載

首先在看這篇文章的前提下，你得會用Struts框架，有一定的基礎瞭解，說白了瞭解怎麼搭建就行了，然後基本就能順利執行本篇文章的Demo，當然這個類不僅僅侷限於圖片上傳下載的，因為是自己用流寫的方法所以可以支援其他檔案上傳下載。

xshell 使用 sftp上傳下載檔案

linux安裝 lrzsz 可以用 sz 下載檔案 rz 上傳檔案還可以用sftp現在上傳下載檔案常用命令： sftp:/www> help bye finish your SFTP session cd change your remote

Linux安裝rz、sz命令（供SecureCRT上傳下載檔案）

[[email protected] ~]# yum install lrzsz 如果顯示No package lrzsz available.Error: Nothing to do,則說明本地源找不到lrzsz包，需要手動下載並編譯安裝 [[email prot

上傳下載檔案

上傳下載檔案上傳： h5中input有個type屬性file，可以實現選擇檔案功能，accept屬性可以選擇顯示的檔案型別,預設單選，加個multiple屬性可以多選使用document.querySelector獲取，獲取的檔案資訊是不可修改的，如下 // input原生樣式略醜，可以隱藏，用自

struts2-上傳下載檔案

struts2的檔案上傳下載很簡單，因為有攔截器的幫助，可以省略大部分程式碼，只需要通過寫入路徑就可實現。上傳檔案 1、表單的檔案上傳中，method必須為post，還要加個enctype=”multipart/form-data” <form action="test

Ubuntu ssh登陸方式和scp命令上傳下載檔案

ssh登陸方式：在本地命令列終端輸入：ssh [email protected] , 其中username為需要登陸的伺服器的使用者名稱,address為伺服器ip，然後根據提示輸入密碼即可。 scp是一個遠端檔案拷貝程式，用於上傳下載檔案非常的方便。上傳檔案: 在本地命令

那些年Hadoop上傳下載檔案遇到的坑

坑一：報錯使用者不具有許可權 Permission denied: user=windows, access=WRITE, inode="/":hadoop:supergroup:drwxr-xr-x 在Hadoop的hdfs-site.xml 中設定安全許可權關閉，但是這是極為不安全的

JAVA API 上傳下載檔案到HDFS

package com.kfk.hadoop.hdfs; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apach

Windows下vagrant建立VirtualBox後，運用SecureCRT執行rz，sz命令上傳下載檔案

最近因為學習的需要，第一次接觸了vagrant。因為是Windows環境，所以通過cmd中以進去之後，也無法複製黏貼。 rz，sz便是Linux/Unix同Windows進行ZModem檔案傳輸的命令列工具。 windows端需要支援ZModem的telnet/

php使用新浪雲Storage儲存上傳下載檔案，建立bucket、Bucket 操作、Object 上傳操作，Object 下載操作，Object 刪除操作、Object 複製操作，生成一個外網能夠訪

<?php //新浪雲 Storage PHP use use sinacloud\sae\Storage as Storage; // 方法一：在新浪雲執行環境中時可以不傳認證資訊，預設會從應用的環境變數中取 $s = new Storage();

FileUpload 上傳下載檔案相容IE8

相關推薦