首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的。
而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法。
开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps:Ajax技术基本上可以说是由google公司带起来的,但少 Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。
我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
一共两个文件就可实现:index.html 和 upload.jsp,在这里讲解一下,文后会附上源码
--index.html
html 代码
1. <html>
2. <body>
3.
4. <form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame" >
5. <input type="file" id="file" name="file" style="width:450">
6. <INPUT type="submit" value="上传文件"><span id="msg"></span>
7. <br>
8. <font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>
9. <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
10. </form>
11.
12. </body>
13. </html>
14.
15. <script type="text/javascript">
16. function callback(msg)
17. {
18. document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
19. document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";
20. }
21. </script>
index.html 中主要要做的就是写一个 form 和 iframe ,并把 form 的 target 设为 iframe 的名字,注意要把 iframe 设为不可见,其他的都是正常的文件上传的写法,这样刷新的页面就是这个隐藏的 Iframe ,而在 index.html 中是不会有页面刷新的,js的 callback 方法是回调方法。用于清空文件上传框和显示后台信息,注意清空文件上传框的方法,和普通方法有点不一样。
--upload.jsp
jsp 代码
1. <%@ page language="java" contentType="text/html; charset=gb2312" %>
2. <%@ page import="com.jspsmart.upload.SmartUpload"%>
3.
4. <%
5. //新建一个SmartUpload对象
6. SmartUpload su = new SmartUpload();
7.
8. //上传初始化
9. su.initialize(pageContext);
10.
11. // 设定上传限制
12. //1.限制每个上传文件的最大长度。
13. su.setMaxFileSize(10000000);
14.
15. //2.限制总上传数据的长度。
16. su.setTotalMaxFileSize(20000000);
17.
18. //3.设定允许上传的文件(通过扩展名限制),仅允许doc,txt文件。
19. su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");
20.
21. boolean sign = true;
22.
23. //4.设定禁止上传的文件(通过扩展名限制),禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。
24. try {
25. su.setDeniedFilesList("exe,bat,jsp,htm,html");
26.
27. //上传文件
28. su.upload();
29. //将上传文件保存到指定目录
30. su.save("c:\\");
31.
32. } catch (Exception e) {
33. e.printStackTrace();
34. sign = false;
35. }
36. if(sign==true)
37. {
38. out.println("<script>parent.callback('upload file success')</script>");
39. }else
40. {
41. out.println("<script>parent.callback('upload file error')</script>");
42. }
43. %>
upload.jsp 中只要注意最后输出的格式就可以了。其实原理就是输出一段js代码到 iframe 中,然后在iframe中来控制它的父页面。
OK,至此一个无刷新的页面上传组件就做好了,不要忘了在 WEB-INF/lib 下加上必须的 jspSmartUpload.jar 包。
需要说明的是使用Iframe来上传,状态栏还是会有刷新的,因为iframe 中的页面刷新了嘛,但是外部页面,就是你所看到的页面是没有刷新的,所以也可以说是类似Ajax上传。
分享到:
相关推荐
为了解决这一问题,ASP(Active Server Pages)结合AJAX(Asynchronous JavaScript and XML)技术,实现了无刷新文件上传,同时还提供了进度条显示,提高了交互性。本文将深入探讨这种技术的实现原理及步骤。 一、...
在Web开发中,用户交互体验是一个重要的考量因素,而无刷新文件上传就是提升用户体验的一种技术。AJAX(Asynchronous JavaScript and XML)技术以其异步、无刷新的特性,广泛应用于网页交互,但其本身并不直接支持...
标题“jq+php无刷新文件上传”涉及到的技术主要包括前端的jQuery(jq)库和后端的PHP编程语言,以及实现无刷新(AJAX)文件上传的技术。无刷新文件上传是现代网页应用中常见的一种功能,它允许用户在不刷新整个页面...
实现无刷新文件上传的具体步骤如下: 1. **前端准备**:创建一个HTML表单,包含文件输入元素。使用JavaScript监听文件输入元素的change事件,当用户选择文件后触发上传操作。 2. **DWR配置**:在服务器端,设置DWR...
在IT行业中,无刷新文件上传是一项重要的用户体验优化技术,它使得用户在上传文件时无需等待页面刷新,从而提高交互效率和用户体验。本篇文章将详细探讨如何在JSP(JavaServer Pages)环境中实现这一功能。 首先,...
本文将深入探讨无刷新文件上传的原理、实现方式以及相关知识点。 一、无刷新文件上传原理 传统的文件上传通常需要用户填写表单,点击提交按钮后,浏览器会发送一个HTTP请求到服务器,整个页面随之刷新。而无刷新...
它允许我们在Ajax请求中发送文件,是实现无刷新文件上传的关键。 二、PHP后端处理 1. **文件上传配置**:在PHP中,需要设置`php.ini`文件中的`upload_max_filesize`、`post_max_size`等参数,确保能接收足够大的...
【标题解析】 "上传下载]仿163网盘无刷新文件上传 ...这个项目提供了实现无刷新文件上传的一个实例,对于学习JSP和AJAX的开发者来说,是一个有价值的参考资料,可以通过分析源代码了解如何在实际项目中集成这些技术。
在本案例中,“ASP源码—简便无刷新 ASP 文件上传系统.zip”是一个包含ASP源代码的压缩包,旨在实现一个无需页面刷新的文件上传功能。这种功能在Web应用程序中非常常见,比如用户在网站上提交表单时上传图片或文档。...
总结起来,实现.NET MVC无刷新文件上传的关键步骤包括: 1. 在视图中添加文件选择元素,并绑定`onchange`事件触发Ajax请求。 2. 使用jQuery的`$.ajax`发送文件数据到服务器。 3. 在服务器端的控制器中创建一个处理...
在本项目中,我们看到的"**dwr3实现的无刷新文件上传**"是一个简单的示例,旨在展示如何使用DWR3来实现在不刷新整个页面的情况下上传文件。这对于提升用户体验非常关键,因为它使得用户能够在不离开当前页面的情况下...
这种技术利用Active Server Pages(ASP)脚本语言,与客户端浏览器交互,提供了一个无需页面刷新的用户体验。 在ASP批量上传系统中,有两种常见的上传方式:急速上传和普通上传。急速上传通常依赖于Flash、...
实现页面无刷新文件上传,利用ajax技术实现
在ASP中实现无刷新文件上传,主要涉及以下技术点: 1. **AJAX**:无刷新上传的核心是AJAX(Asynchronous JavaScript and XML),它允许前端与后台进行异步通信,无需刷新整个页面。在这个项目中,可能使用了...
这个压缩包“ajaxfileupload1.0.zip”提供了一种实现无刷新文件上传的解决方案。无刷新上传,也称为异步文件上传,是现代网页应用中常用的一个功能,它允许用户在不重新加载整个页面的情况下发送文件到服务器。这种...
为了实现无刷新上传,我们需要在客户端使用JavaScript或jQuery监听表单提交事件,并使用AJAX发送文件和表单数据。这样,页面不会被刷新,用户可以继续填写其他信息: ```javascript $(document).ready(function() {...
综上所述,"ASP无刷新批量上传文件插件 有进度条"实现了基于Ajax的无刷新文件上传功能,结合JavaScript和ASP技术,为用户提供了一个友好的界面和实时的进度反馈。这不仅提高了上传效率,也提升了用户的使用体验。
以下是一个简单的JavaScript实现无刷新文件上传的步骤: #### 步骤1:创建HTML元素 在HTML中添加一个`<input>`元素,类型为`file`,用于让用户选择要上传的文件。 ```html 上传 ``` #### 步骤2:获取文件并创建...
这个标题揭示了一个基于ASP(Active Server Pages)技术的文件上传系统,它的核心特性是“无刷新”,即用户在上传文件时,页面无需重新加载,提供了更为流畅的用户体验。无刷新上传通常通过Ajax(Asynchronous ...
在提供的压缩包文件"Ajax无刷新文件上传(带进度条,无组件)"中,很可能是包含了一个示例代码或者教程,通过阅读"说明.txt",你可以更具体地了解实现这一功能的步骤和代码结构。在实际开发中,结合这些知识和示例,你...