无刷新上传文件：iframe、FormData与FileReader技术解析

162 浏览量更新于2024-08-28 收藏 114KB PDF 举报

本文主要探讨了三种在不刷新页面的情况下上传文件的方法，即基于iframe、FormData和FileReader的实现方式。一、基于iframe的文件上传传统的表单提交（form）会引发页面重定向，但在某些场景下我们希望在上传文件后保持页面状态不变。通过嵌入一个隐藏的iframe，可以实现无刷新的文件上传。具体步骤如下： 1. 创建一个隐藏的iframe元素，设置其target属性为目标URL。 2. 设置form的target属性为iframe的ID，这样form提交时会将内容发送到iframe而不是当前页面。 3. 提交form，服务器处理请求并返回结果。 4. 通过检查iframe的内容来获取上传响应，通常需要解析iframe的src属性或内容文本。二、基于FormData的文件上传 HTML5引入的FormData对象提供了一种新的处理表单数据的方式，尤其适合无刷新文件上传： 1. 当用户点击提交按钮时，阻止表单的默认提交行为（使用event.preventDefault()）。 2. 获取表单元素（formDOM），创建一个FormData实例，并将表单数据传入构造函数。 3. 创建一个新的XMLHttpRequest对象，打开POST请求到服务器的URL。 4. 将FormData对象设置为XMLHttpRequest的send()方法的参数。 5. 监听XMLHttpRequest的onreadystatechange或onload事件，获取服务器返回的响应。三、基于FileReader的文件预览与上传 FileReader API允许在浏览器中读取本地文件，通常用于文件预览，但也可以配合Ajax实现无刷新上传： 1. 用户选择文件后，获取input[type=file]元素的files列表。 2. 使用FileReader的readAsDataURL()方法读取文件内容，生成base64编码的字符串，可用于在页面上预览。 3. 如果需要上传，可以将文件内容转换为Blob，然后构造FormData对象，添加到表单数据中。 4. 使用XMLHttpRequest发送POST请求，将FormData对象作为请求体。总结，这三种方法各有优势：iframe适用于旧版本浏览器，FormData更现代且适用于大部分现代浏览器，FileReader则适合需要预览文件的场景。根据项目需求和目标用户群体，可以选择适合的上传方案。

谈谈基于谈谈基于iframe、、FormData、、FileReader三种无刷新上传文三种无刷新上传文

件的方法件的方法

发请求有两种方式，一种是用ajax，另一种是用form提交，默认的form提交如果不做处理的话，会使页面重定向。以一个简单

的demo做说明：

html如下所示，请求的路径action为”upload”，其它的不做任何处理：

名字 <input type="text" name="user"></input>

头像 <input type="file" name="file"></input>

</form>

服务端(node)response直接返回: “Recieved form data”，演示如下：

可以看到默认情况下，form请求upload的同时重定向到upload。但是很多情况下是希望form请求像ajax一样，不会重定向

或者刷新页面。像上面的场景，当上传完成之后，将用户选择的头像显示在当前页面。

解决办法第一种是使用html5的FormData，将form里面的数据封装到FormData对象里，然后再以POST的方式send出去。

如下面代码所示，对提交按钮的单击事件做一个响应，代码第6行获取到form的DOM对象，然后第8行构造一个FormData的实

例，第18行，将form数据发送出去。

document.getElementById("_submit").onclick = function(event){

//取消掉默认的form提交方式

if(event.preventDefault) event.preventDefault();

else event.returnValue = false; //对于IE的取消方式

var formDOM = document.getElementsByTagName("form")[];

//将form的DOM对象当作FormData的构造函数

var formData = new FormData(formDOM);

var req = new XMLHttpRequest();

req.open("POST", "upload");

//请求完成

req.onload = function(){

if(this.status === ){

//对请求成功的处理

}

//将form数据发送出去

req.send(formData);

　　　　　　 //避免内存泄漏

　　　　　　 req = null;

}

上传成功后，服务将返回图片的访问地址，补充14行对请求成功的处理：在submit按钮的上方位置显示上传的图

片：

var img = document.createElement("img");

img.src = JSON.parse(this.responseText).path;

formDOM.insertBefore(img, document.getElementById("_submit"));

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38568031

粉丝: 5
资源: 895

无刷新上传文件：iframe、FormData与FileReader技术解析

无刷新上传文件

jsp无刷新上传文件

无刷新上传文件：iframe、FormData、FileReader实现解析

通过Ajax使用FormData对象无刷新上传文件方法

使用PHP和HTML5 FormData实现无刷新文件上传教程

Ajax+FormData+javascript实现无刷新表单信息提交

php+iframe实现隐藏无刷新上传文件

js formData和 new FileReader()上传方式

jQuery的ajax中使用FormData实现页面无刷新上传功能

利用H5特性FormData实现不刷新文件上传

最新资源