FileUpload 上传下载文件兼容IE8

最新推荐文章于 2020-08-06 11:29:27 发布
最新推荐文章于 2020-08-06 11:29:27 发布
阅读量9.9k 收藏 2
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiudihanbing/article/details/47090391
版权

项目上使用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\"' οnclick='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' οnclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' οnclick='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\"' οnclick='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' οnclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' οnclick='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='' οnclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='' οnclick='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和谷歌还会有一些问题。

jiudihanbing
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兼容ie8 上传
weixin_42286461的博客
12-21 491
页面 <body> <form id="uploadFile"> <input class="ui-file-input" id ="fileload" name="file" type="file" change="fileLoadExcel" > </form> </body> <script type="text/javascript" src="../jquery/jque...
fileUpload(兼容IE的Ajax上传图片)
09-18
总之，"fileUpload(兼容IE的Ajax上传图片)"是一个针对老旧浏览器的文件上传解决方案，它利用了Ajax技术并解决了在IE8上的兼容性问题，为用户提供了一种流畅且无刷新的图片上传体验。通过理解和实现这样的功能，...
上传插件支持ie8
03-26
上传插件支持ie8，用于pc端或h5页支持ie8、ie9、ie10、ie11
兼容ie8的文件上传插件Web Uploader demo
曉儂
08-06 1102
(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！） jquery-1.7.0 也会有问题，点击上传响应不到，所以在这个推荐用jquery1.11.1版本 jquery 版本获取地址（http://www.jq22.com/jquery-info122或https://jquery.com/） <!DOCTYPE html> <html lang="en"> <head> <meta ch
JS异步文件上传（兼容IE8+）
12-10
在非html5的情况下是无法用ajax把文件推送到后端的，只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为，返回text、html、json等类型的内容时浏览器会对当前页面进行渲染，相当于刷新。 所以基本思路很简单，提交上传文件表单时，让浏览器转移到iframe处理响应信息，响应信息嵌入一段js代码，这段js代码调用当前页面的一个方法就可以实现回调，类似于xss攻击。 这时就要用到form表单的target属性，我们这里只需要用到iframename的值，iframename指的是iframe的name属性，意思是转移到iframe
兼容ie8的文件上传和预览
weixin_43445771的博客
04-11 1038
javascript实现IE,firefox客户端图片预览 if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现 fileSize = file.files[0].size; if(fileSize > 3145728){ alert(‘图片大小超出，请重新选择！’); return false; ...
基于SpringMVC的文件上传（兼容IE8）
04-04
为了兼容IE8，我们可能需要使用jQuery Form插件，同时在Controller中对上传的文件进行必要的验证和处理。当涉及到特定类型的文件，如Excel，我们可以利用第三方库（如Apache POI）进行进一步的操作。
如何使用JS获取IE上传文件路径(IE7,8)
12-09
接着，声明一个空字符串`filepath`，用于存储文件路径，以及获取上传文件控件`fileupload`。 ```javascript var filepath = ""; var fileupload = document.getElementById(id); ``` 如果用户没有选择文件，函数会...
ajax文件上传成功 解决浏览器兼容问题
01-19
ajaxfileupload控制很好用，不过发现上传文件后的结果为被浏览器处理，IE不会，谷哥和火狐都会进行处理，而且谷哥和火狐处理后的结果都不一样，这里对以上三种浏览器进行了兼容性调整。 jQuery.extend({ ...
FileUpload上传图片(图片不变形)
09-05
在网页开发中，图片上传是一项常见的功能，而保持图片上传后不变形则是一个重要的用户体验考虑因素。本篇文章将深入探讨如何使用FileUpload组件实现在上传图片时保持图片比例，避免因强制尺寸调整导致的变形问题。 ...
uploadfile.exe
07-08
UI自动化选中文件时，用粘贴板复制文件地址，回车的方式不稳定 用exe选中文件更稳定 String ProjectPath = RunConfiguration.getProjectDir() File file = new File(ProjectPath + "/" + filePath) File uploadExe = new File(ProjectPath, '/' + 'File/tools/uploadfile.exe') String newuploadExe = uploadExe.getAbsolutePath() String cmd = newuploadExe + " \"" + file.getAbsolutePath() + "\""
uploader.exe
09-11
自动上传文件小工具，可以上传图片、文档、视频、音频等各种格式文件
上传文件fileUPLoad
07-09
上传文件fileUPLoad
兼容ie,Firefox的文件上传
07-31
NULL 博文链接：https://zyj0021.iteye.com/blog/1125782
IE8上传word文件
yuyuyumeimeimei的博客
03-14 249
背景：刚开始开发word上传功能时，用的formdata的格式传给后台 问题：后来客户那边说明情况，用的IE8，在用formdata传值时，在后端request不能强转为MultipartHttpServletRequest 调查原因：因为IE8不支持FormData，IE10才支持，因此此方法不兼容IE10以下的浏览器 解决方法：使用jquery.form.js支持的ajaxsubmit进...
IE8下上传文件方式
杨鹏飞的博客
05-31 3695
1.准备页面， 加入   2.在js中加入 //图片预览chacgeImg function chacgeImg(value){ jQuery("#loadgif").css("display","block"); var imgType=value.substring(value.lastIndexOf("."
Uploadify在IE下的兼容问题解决
phy201106的博客
05-13 3502
一、在IE9、IE10不能点击的问题解决 解决方法：进入uploadify的js文件中，搜索SWFUpload.prototype.getFlashHTML，找到它对应的语句，将方法全部替换为以下内容： SWFUpload.prototype.getFlashHTML = function () { // Flash Satay object syntax: h
解决asp.net中Fileupload上传在IE不同版本下显示图片
我的地盘
03-21 892
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     修改设备信息                body{ background-color:#f3ffe3; font-size:13px;}     #tbSetInfo td {height:3
使用Commons-Fileupload实现Web文件上传与下载
"传智播客的方立勋老师讲解的WEB视频教程专注于文件上传和下载技术。课程涵盖了在Web开发中实现文件上传的基本步骤和关键知识点，包括在HTML页面中添加上传输入项以及在Servlet中处理上传文件的细节。此外，教程还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值