`
JavaSam
  • 浏览: 954722 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript模拟简单的文件上传域

 
阅读更多
/**
 * @author wsf (javascript模拟文件上传域)
 */
function createFileIpt(container, name) {
	var filhtml = [];
	filhtml.push("<div class='file-box'>");
	filhtml.push("<input type='text' name='textfield' id='textfield' class='txt' />");
	filhtml.push("<input type='button' class='btn' value='浏览...' />");
	filhtml.push("<input type='file' name='"
					+ name
					+ "' class='file' id='"
					+ name
					+ "' size='28' onchange=\"document.getElementById('textfield').value=this.value\"/>");
	filhtml.push("</div>");
	container.append(filhtml.join(""));
	appendCss();
}
/**
 * 添加样式
 * @returns
 */
function appendCss() {
	$(".file-box").css({
		"position" : "relative",
		"width" : "100%",
		"cursor":"pointer"
	});
	$(".txt").css({
		"height" : "22px",
		"border" : "1px solid #cdcdcd",
		"width" : "180px",
		"cursor":"pointer"
	});
	$(".btn").css({
		"background-color" : "#FFF",
		"border" : "1px solid #CDCDCD",
		"height" : "24px",
		"width" : "70px",
		"cursor":"pointer"
	});
	var _pos = $(".txt").position();
	$(".file").css({
		"position" : "absolute",
		"top" : "0",
		"left" : _pos.left + "px",
		"height" : "24px",
		"filter" : "alpha(opacity:0)",
		"opacity" : "0",
		"width" : "250px",
		"cursor":"pointer"
	});
}
/**
 * 创建
 */
createFileIpt($("#filecontainer"), "logo");
/**
 * ajax上传文件
 * @returns {Boolean}
 */
function ajaxFileUpload() {
	$.ajaxFileUpload({
		url : 'some.do',//用于文件上传的服务器端请求地址
		secureuri : false,//一般设置为false
		fileElementId : 'logo',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType : 'json',//返回值类型 一般设置为json
		success : function(data, status)//服务器成功响应处理函数
		{
			alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
			if (typeof (data.error) != 'undefined') {
				if (data.error != '') {
					alert(data.error);
				} else {
					alert(data.message);
				}
			}
		},
		error : function(data, status, e)//服务器响应失败处理函数
		{
			alert(e);
		}
	})
	return false;
}

 直接在页面引入js 并且在页面定义一个放上传域的dom就行了

0
0
分享到:
评论

相关推荐

    改变文件域的样式实现思路同时兼容ie、firefox

    这个方法的优点在于,它仅模拟了文件域的外观,而实际的文件上传功能仍由原生的文件域提供,因此在兼容性和安全性方面都有保障。虽然这里展示的样式非常基础,但你可以根据项目需求进一步美化这两个元素,例如添加...

    ASP.NET Ajax 带进度条文件上传示例

    ASP.NET AJAX 文件上传技术是一种在后台处理大文件上传的同时,为用户提供实时进度反馈的方法,它结合了ASP.NET的服务器端处理能力和AJAX的无刷新用户体验。在这个示例中,我们看到一个实现文件上传并带有进度条功能...

    ajax文件上传

    这里我们讨论的是“伪Ajax文件上传”这一主题,它主要针对JavaScript实现的文件上传功能,特别是考虑了对Firefox和IE8浏览器的兼容性。 文件上传在Web应用中是一个常见的需求,传统方式通常是通过表单提交,页面会...

    真正实现ajax上传文件 兼容IE6789火狐谷歌世界之窗

    在现代Web开发中,文件上传是一个常见的功能,但要实现跨浏览器兼容性,尤其是在旧版本的Internet Explorer(如IE6、IE7、IE8、IE9)以及Firefox、Chrome和世界之窗等其他浏览器上,可能面临一些挑战。Ajax上传文件...

    js实现文件上传表单域美化特效

    本文主要介绍了一种使用JavaScript实现的文件上传表单域美化特效,提供了7种不同的风格,让上传文件的界面更加时尚、吸引人。以下是对这个特效的详细解析: 1. **隐藏原生输入框**: 在美化过程中,首要任务是隐藏...

    文件进度条上传

    在IT领域,文件上传是常见的用户交互操作,特别是在云存储、文件分享以及各种在线服务中。而“文件进度条上传”则是为了提升用户体验,让用户在等待文件上传时能明确了解当前的上传进度,减少用户的不耐烦感。这种...

    DSO文件保存到服务器

    首先,DSO文件上传的核心原理是模拟HTML表单的文件域提交。由于Web页面上的DSO文件无法直接作为表单的一部分提交,所以需要将文件转换为表单域的形式,通过HTTP接口发送到服务器。这一过程类似于传统的表单提交,但...

    You Don't Know JS(高清带目录中文版)1-3

    由于文件大小限制,本书被分成了两个压缩包上传。 首先,我们来看“1入门与进阶”这部分。这一章节主要涵盖了JavaScript的基础知识,包括变量、数据类型、操作符、流程控制以及函数等。其中,JavaScript的动态类型...

    基于SpringBoot+Vue3的仿百度网盘在线网盘系统设计源码

    该项目为基于SpringBoot和Vue3框架构建的在线网盘系统源码,包含98个文件,涵盖48个Java源文件、19个Vue组件文件、7个JavaScript脚本...该系统具备文件上传、下载、删除和分享等核心功能,旨在模拟百度网盘的用户体验。

    asp.net 3.5上传附件进度条.rar

    这个压缩包"asp.net 3.5上传附件进度条.rar"可能包含了一个示例项目,用于演示如何在ASP.NET 3.5环境中实现文件上传进度条的效果。在ASP.NET 3.5中,我们通常使用HttpPostedFileBase类来处理上传的文件,而进度条的...

    Dreamweaver网页设计模拟试题

    8. 将网站上传到服务器,确保所有文件和目录结构正确。 9. 定期更新内容,优化网站性能和用户体验。 通过这些模拟试题,学习者可以全面回顾和检验自己在Dreamweaver网页设计方面的知识掌握程度,为进一步提升网页...

    Javascript代码实现仿实例化类

    在JavaScript中,实现类的仿实例化是一种设计模式,它模拟了面向对象编程中的类实例化行为,但并不依赖于JavaScript的原型继承或者ES6中引入的class关键字。下面将结合给定文件内容,详细解释JavaScript仿实例化的...

    Dreamweaver网页设计模拟试题(1).doc

    9. 发布网站:上传所有文件至服务器,设置域名绑定。 10. 维护更新:定期检查和更新网站内容,保持与访客互动。 以上是基于【Dreamweaver网页设计模拟试题】的部分内容解析,涵盖了多个Dreamweaver使用中的核心概念...

    WebUploadTest(跨域)

    在"WebUploadTest(跨域)"项目中,开发者可能通过创建一个简单的Web应用,模拟了跨域文件上传的流程,包括前端的文件选择、FormData构建、CORS设置以及后端的接收和响应。通过这个示例,开发者可以学习并实践如何在...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    当上传文件时,客户端同时显示文件上传的进度,从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件后台处理页面 / prototype.js prototype框架类库文件 第21章(/ch21)...

    动态网站期末考试模拟考试题和答案解析1_.doc

    5. **测试与发布**:在浏览器中预览页面,确保兼容性和功能正常,然后将文件上传到服务器,完成网站部署。 这些知识点全面覆盖了网页设计与制作的基本概念,对于理解动态网站的开发和维护至关重要。通过这样的模拟...

    网页设计与制作Dreamweaver8期末模拟试题一.doc

    网页设计与制作——...最后,将文件上传到服务器,通过域名或IP地址访问网站,完成发布。 以上是对模拟试题中涉及的网页设计与制作Dreamweaver8的相关知识点的详细解析,涵盖了从基础操作到高级特性的多个方面。

    2010年上海市高校计算机等级考试模拟考试题整理.pdf

    12. 上传是指将本地文件传送到远程计算机上。 13. 局域网(LAN)的规模最小,其次是城域网(MAN),然后是广域网(WAN),最大的是因特网(Internet)。 14. 在PowerPoint中,通过幻灯片母版可以更改背景图片以应用...

    Dreamweaver模拟试题1.pdf

    总的来说,这些题目涉及到了Dreamweaver中的基本概念、网页交互、表单设计、文件上传、颜色编码、HTML标记以及团队协作等方面的知识点,涵盖了Web开发的重要方面。了解并掌握这些内容对于从事网页设计和开发工作至关...

Global site tag (gtag.js) - Google Analytics