`
solon.jar
  • 浏览: 44762 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

AJAX文件上传实现

阅读更多

仅用于个人知识总结,高手勿看。

 

由于文件上传是以二进制流的形式进行传输的,而身为AJAX的关键对象之一的xmlhttp对象传输的却是xml格式的字符流,导致要我们想要真正的实现AJAX异步文件上传的梦想破灭。于是不笨的高层应用程序员只好放弃xmlhttp对象,另谋出路。以下是一种解决方案的实现步骤:

 

(1)添加用于文件上传的form

<form name="upfile_form" action="/fileUploadServlet" method="POST"

enctype="multipart/form-data" target="screct_frame" >

  ......

 

</form>

作为文件上传用途,必须谨记两个方针:method="POST" 和 enctype="multipart/form-data"


(2)在表单所在页面添加一个隐藏的iframe,并将上传from标签的target属性指向frame。frame用于处理页面跳转,服务端输出响应(利用这个特性,可以模拟AJAX的回调函数实现)。

 <iframe name="screct_frame" style="display:none;"></iframe>

 

(3)

在表单所在页面撰写js模拟回调函数


var callback = function (result){

    // 成功或失败的标志,由你决定

if (result == 1) {

do whatever you want;

}else

   help youself;

}


(4) 在servlet 中处置完毕上传的文件后,用response输出js代码,实现回调callback方法

public void doPost(...){

// 处理上传的文件,可以见另一篇日志(点击访问)

// ...

response.getWriter().print("<script>parent.callBack(result);</script>"); ...

}

 

 

分享到:
评论

相关推荐

    ajax实现文件上传

    ajax实现文件上传 其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实...

    Ajax实现文件上传

    在Ajax文件上传中,FormData对象扮演了关键角色。它允许我们将文件和其他数据打包成一个格式,然后通过XMLHttpRequest对象发送到服务器。例如: ```javascript var formData = new FormData(); formData.append('...

    上传文件AJAX

    虽然可以手动实现AJAX文件上传,但有许多优秀的库和框架可以帮助我们简化工作,如jQuery的`$.ajax`或`$.fileUpload`,AngularJS的`ng-file-upload`,React的`react-dropzone`等。 ### 总结 "上传文件AJAX"技术使得...

    SpringMVC+Ajax异步文件上传

    在本教程中,我们将探讨如何结合`SpringMVC`和`Ajax`来实现异步文件上传,并讨论短视频背景以及`a`标签绑定文件域的相关知识。 1. **SpringMVC中的文件上传** - **MultipartFile接口**:`SpringMVC`提供了一个名为...

    ajax实现文件上传源码

    **Ajax 实现文件上传技术详解** 在Web开发中,用户经常需要进行文件上传操作,而传统的文件上传方式通常会刷新整个页面,导致用户体验不佳。...希望这个教程能帮助你理解并实现Ajax文件上传功能。

    ajax和JSP实现文件上传

    通过以上步骤,我们可以利用Ajax和JSP实现一个高效、用户友好的文件上传系统。在实际开发中,还可以结合jQuery、Vue.js、React等前端框架,进一步简化代码并提高可维护性。总之,理解Ajax的异步特性以及JSP的服务器...

    ajax异步上传文件实现

    在HTML5中,File API的引入为Ajax文件上传提供了可能。`&lt;input type="file"&gt;`元素现在可以与JavaScript进行交互,允许我们访问用户选择的文件对象。通过`FileReader`对象,我们可以读取文件内容;通过`FormData`对象...

    ajax实现java文件下载

    为了克服这一问题,开发人员通常会利用Ajax技术来实现异步文件下载,使得用户在下载文件的同时仍能保持页面的正常操作。本话题将详细探讨如何通过Ajax实现Java文件的下载,并介绍相关的核心概念和技术。 1. **Ajax*...

    Struts AJAX文件上传

    在Struts框架中集成AJAX文件上传,通常需要以下几个关键步骤: 1. **配置Struts Action**:首先,你需要创建一个Struts Action来处理文件上传请求。这个Action类需要实现`com.opensymphony.xwork2.ActionSupport`...

    struts2+jquery+ajax文件异步上传

    总的来说,"struts2+jquery+ajax文件异步上传"是一个结合了后端处理和前端交互的文件上传解决方案,提供了良好的用户体验和灵活性。通过MyEclipse这样的集成开发环境,开发者可以方便地构建、调试和部署这样的项目。

    使用ajax实现多文件上传

    使用普通表单的input框,引入多文件上传插件,传报文格式的参数,表单内容同时提交

    springmvc ajax 文件上传下载文件 multiple

    2. **Ajax文件上传**: - 使用jQuery的`$.ajax()`或`$.formData()`方法,可以发送异步请求,实现在后台处理文件上传而无需页面刷新。 - 创建一个`FormData`对象,将选中的文件添加到其中,然后通过`xhr.send...

    ajax文件上传示例

    1. HTML5的File API:为了实现AJAX文件上传,我们需要利用HTML5引入的File API。File API允许JavaScript直接访问和操作用户选择的文件,包括读取文件内容、获取文件信息等。 2. `&lt;input type="file"&gt;`:在HTML页面...

    ajax异步文件上传,servlet处理

    为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许在后台与服务器进行通信,而无需刷新整个页面。本篇文章将...

    Ajax文件上传控件

    Ajax文件上传控件是一种在网页上实现异步文件上传功能的技术,主要应用于.NET框架下的Web开发,使用C#语言编写。这种控件避免了传统文件上传时必须刷新整个页面的不便,极大地提升了用户体验。在UpdatePanel内使用...

    Ajax 文件上传组件

    实现Ajax文件上传的步骤大致如下: 1. **创建HTML表单**:首先,我们需要在HTML页面中创建一个用于选择文件的input元素,类型为file。例如: ```html ``` 2. **JavaScript事件监听**:接下来,我们需要监听...

    大文件上传, ajax 实现, 支持10G以上的上传

    本教程将基于标题“大文件上传,ajax实现,支持10G以上的上传”和描述,详细介绍如何使用AJAX实现大文件上传,并探讨其背后的原理和技巧。 首先,理解大文件上传的关键在于分块上传。当文件过大时,一次性上传整个...

    php+ajax文件上传

    本资料包"php+ajax文件上传"提供了相关的代码示例,帮助开发者理解和实现这一技术。 首先,我们来理解文件上传的基本原理。在HTML表单中,`&lt;input type="file"&gt;`元素允许用户选择本地文件。当表单提交时,这些文件...

    ajax文件上传JS

    改装的ajax图片上传功能,实现图片上传无刷新

Global site tag (gtag.js) - Google Analytics