/** * @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就行了
相关推荐
这个方法的优点在于,它仅模拟了文件域的外观,而实际的文件上传功能仍由原生的文件域提供,因此在兼容性和安全性方面都有保障。虽然这里展示的样式非常基础,但你可以根据项目需求进一步美化这两个元素,例如添加...
ASP.NET AJAX 文件上传技术是一种在后台处理大文件上传的同时,为用户提供实时进度反馈的方法,它结合了ASP.NET的服务器端处理能力和AJAX的无刷新用户体验。在这个示例中,我们看到一个实现文件上传并带有进度条功能...
这里我们讨论的是“伪Ajax文件上传”这一主题,它主要针对JavaScript实现的文件上传功能,特别是考虑了对Firefox和IE8浏览器的兼容性。 文件上传在Web应用中是一个常见的需求,传统方式通常是通过表单提交,页面会...
在现代Web开发中,文件上传是一个常见的功能,但要实现跨浏览器兼容性,尤其是在旧版本的Internet Explorer(如IE6、IE7、IE8、IE9)以及Firefox、Chrome和世界之窗等其他浏览器上,可能面临一些挑战。Ajax上传文件...
本文主要介绍了一种使用JavaScript实现的文件上传表单域美化特效,提供了7种不同的风格,让上传文件的界面更加时尚、吸引人。以下是对这个特效的详细解析: 1. **隐藏原生输入框**: 在美化过程中,首要任务是隐藏...
在IT领域,文件上传是常见的用户交互操作,特别是在云存储、文件分享以及各种在线服务中。而“文件进度条上传”则是为了提升用户体验,让用户在等待文件上传时能明确了解当前的上传进度,减少用户的不耐烦感。这种...
首先,DSO文件上传的核心原理是模拟HTML表单的文件域提交。由于Web页面上的DSO文件无法直接作为表单的一部分提交,所以需要将文件转换为表单域的形式,通过HTTP接口发送到服务器。这一过程类似于传统的表单提交,但...
由于文件大小限制,本书被分成了两个压缩包上传。 首先,我们来看“1入门与进阶”这部分。这一章节主要涵盖了JavaScript的基础知识,包括变量、数据类型、操作符、流程控制以及函数等。其中,JavaScript的动态类型...
该项目为基于SpringBoot和Vue3框架构建的在线网盘系统源码,包含98个文件,涵盖48个Java源文件、19个Vue组件文件、7个JavaScript脚本...该系统具备文件上传、下载、删除和分享等核心功能,旨在模拟百度网盘的用户体验。
这个压缩包"asp.net 3.5上传附件进度条.rar"可能包含了一个示例项目,用于演示如何在ASP.NET 3.5环境中实现文件上传进度条的效果。在ASP.NET 3.5中,我们通常使用HttpPostedFileBase类来处理上传的文件,而进度条的...
8. 将网站上传到服务器,确保所有文件和目录结构正确。 9. 定期更新内容,优化网站性能和用户体验。 通过这些模拟试题,学习者可以全面回顾和检验自己在Dreamweaver网页设计方面的知识掌握程度,为进一步提升网页...
在JavaScript中,实现类的仿实例化是一种设计模式,它模拟了面向对象编程中的类实例化行为,但并不依赖于JavaScript的原型继承或者ES6中引入的class关键字。下面将结合给定文件内容,详细解释JavaScript仿实例化的...
9. 发布网站:上传所有文件至服务器,设置域名绑定。 10. 维护更新:定期检查和更新网站内容,保持与访客互动。 以上是基于【Dreamweaver网页设计模拟试题】的部分内容解析,涵盖了多个Dreamweaver使用中的核心概念...
在"WebUploadTest(跨域)"项目中,开发者可能通过创建一个简单的Web应用,模拟了跨域文件上传的流程,包括前端的文件选择、FormData构建、CORS设置以及后端的接收和响应。通过这个示例,开发者可以学习并实践如何在...
当上传文件时,客户端同时显示文件上传的进度,从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件后台处理页面 / prototype.js prototype框架类库文件 第21章(/ch21)...
5. **测试与发布**:在浏览器中预览页面,确保兼容性和功能正常,然后将文件上传到服务器,完成网站部署。 这些知识点全面覆盖了网页设计与制作的基本概念,对于理解动态网站的开发和维护至关重要。通过这样的模拟...
网页设计与制作——...最后,将文件上传到服务器,通过域名或IP地址访问网站,完成发布。 以上是对模拟试题中涉及的网页设计与制作Dreamweaver8的相关知识点的详细解析,涵盖了从基础操作到高级特性的多个方面。
12. 上传是指将本地文件传送到远程计算机上。 13. 局域网(LAN)的规模最小,其次是城域网(MAN),然后是广域网(WAN),最大的是因特网(Internet)。 14. 在PowerPoint中,通过幻灯片母版可以更改背景图片以应用...
总的来说,这些题目涉及到了Dreamweaver中的基本概念、网页交互、表单设计、文件上传、颜色编码、HTML标记以及团队协作等方面的知识点,涵盖了Web开发的重要方面。了解并掌握这些内容对于从事网页设计和开发工作至关...