【JS】ajax 实现无刷新文件上传

一、摘要

最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种

1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果

1 <form target="hiddenFrame" method="post" enctype="multipart/form-data" action=‘xx‘>
2     <input value=""/>
3     <iframe name="hiddenFrame" style="display:none"/>
4 </form>

2) 使用ajax 请求, 使用formData 对象传输二进制文件,适用于获取后端返回的数据并进行处理

 1 var fd = new FormData($(‘#form‘));
 2 $.ajax({
 3     url: ‘‘,
 4     type: ‘get‘,
 5     data: fd,
 6     async: false,
 7     cache: false,
 8     contentType: false, // 告诉jQuery不要去设置Content-Type请求头
 9     processData: false,     // 告诉jQuery不要去处理发送的数据
10     success: function (data) {
11
12     }
13 })

两种方法第一种实现简单,浏览器支持度高, 第二种formData的实现方式,可以对上传是否成功,或者针对上传文件内容进行解析的内容进行处理,但是浏览器支持率不高,具体如下

桌面端:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7+ 4.0 (2.0) 10+ 12+ 5+
支持filename参数 (Yes) 22.0 (22.0) ? ? ?

  移动端:

Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 ? 4.0 (2.0) ?
12+

?
支持filename参数 ? ? 22.0 (22.0) ? ? ?

FormData 是 XMLHttpRequest Level 2 的新接口, 作用有两大类

1) 封装form 表单

2) 传输二进制文件,实现无刷新文件上传

FormData的API

fd.append(key, value);  // 可以在封装form 表单的基础上增加数据

时间: 2024-10-14 03:37:29

【JS】ajax 实现无刷新文件上传的相关文章

基于jQuery Ajax实现无刷新文件上传

最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadForm" enctype="multipart/form-data"> <!-- 声明文件上传 --> <input id="file_upload" type="file" name="pic"

ie8实现ajax无刷新文件上传

ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuery-File-Upload的github:https://github.com/blueimp/jQuery-File-Upload 这里简单介绍一下jQuery-File-Upload的使用. 使用jQuery-File-Upload的基本功能需要引入四个文件: jquery.jquery.ifr

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

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

无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单请求,并通过 XMLHttpRequest 来发送.通过 FormData 对象发送文件也是可以的,如此则无刷新上传就变的非常简单了. 那么 FormData 怎么使用呢?下面phpstudy对此进行简单的介绍. 1. 构造 FormData 对象 想得到一个FormData对象,很简单: var

无刷新文件上传

无刷新文件上传 ajax的FormData对象完成无刷新操作 ajax level 2 标准 可以对文件操作,但是只支持新的浏览器(不兼容低版本的IE),是H5标准 注意事项: 表单大小 单个文件上传大小 ? 实操: 写一个form表单,但是需要注意的是,不为form表单设置 enctype属性 为上传的按钮绑定一个点击事件,完成ajax提交上传文件 利用FormData收集form表单里面的数据(普通数据 + 上传域里面的) 要利用ajax对象的upload成员的onprogress句柄来监控

jsp开发无刷新文件上传程序代码

原文:jsp开发无刷新文件上传程序代码 源代码下载地址:http://www.zuidaima.com/share/1550463484660736.htm 无刷新文件上传程序代码 源代码截图

Javascrpt无刷新文件上传

最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XMLHttpRequest2的浏览器使用FormData通过ajax上传 2.对于ie10一下的浏览器使用iframe异步上传,还需后台服务器做相应处理,这部分也是dojo/request/iframe上传文件的原理. 一.使用FormData上传文件 FormData最频繁使用的功能就是表单序列化及创

jquery无刷新文件上传 解决IE安全性问题

很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的无刷新上传文件方案. 一般上传是用iframe表单提交的方式,页面中的iframe刷新是不会刷新整个页面的,所以由iframe利用input file提交表单上传到服务器在主页面看起来就是无刷新的. 大家能想到的方法无外乎: 1.在页面新建一个iframe和一个form 2.form的target指

easyui+ajaxfileupload,无刷新文件上传

头文件引用 <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="ea