首页
学习
活动
专区
工具
TVP
发布

Ajax下载文件(页面无刷新)

说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果。实质上还是通过提交form表单来返回文件流的输出。...分步实现逻辑: ajax请求服务器,访问数据库,根据查询到的数据生成一个数据文件,返回前台一个json对象(可放置生成成功标记,文件路径等信息)。...ajax success回调函数部分,根据返回的json对象,调用手写的js下载文件的方法,实现页面无刷新下载文件。...// 文件下载 jQuery.download = function(url, method, filedir, filename){ jQuery('<form action="'+url+'...查询数据,输出到<em>文件</em>,保存到服务器,并调用download方法实现<em>下载</em> // 查询数据,输出到<em>文件</em>,保存到服务器,并实现<em>下载</em> function exportOilDetection() { var

7.2K10
您找到你想要的搜索结果了吗?
是的
没有找到

Ajax下载文件添加进度条教程

对于下载文件这个常见场景,相信大家都遇到过,不管是从浏览器下载软件还是在某某后台导出文件之类,但是一般我们使用浏览器下载软件都是可以看到下载进度提示的,而我们在某某后台导出文件之类却很少能看到下载进度,...所以这里给大家介绍一种Ajax下载文件并添加进度条的方法1...., "application/x-www-form-urlencoded"); req.send($('#' + formId + '').serialize());}上述代码核心逻辑是通过原生Ajax...请求下载文件,再通过 req.addEventListener("progress", function (evt) {...}...方法,监听 progress 事件,计算下载进度。需要注意的是如果后端没有返回内容长度( Content-Length ),那么下载进度条是无效的实现效果如下:图片3.

1.3K10

Jquery Ajax请求文件下载操作失败的原因分析及解决办法

一、失败的原因 那是因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。...文件下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。...二、解决方案 1)可以使用jquery创建表单并提交实现文件下载; var form = $(""); form.attr("style","display:none"); form.attr...strZipPath); $("body").append(form); form.append(input1); form.submit(); form.remove(); 2)可以直接使用a标签实现文件下载...; 点击下载 3)使用隐藏iframe或新窗体解决。

3.2K30

Ajax如何实现文件上传

(新手编程1001问_0003) Q:Ajax如何实现文件上传? A:这是个好问题。... 但是,如果表单数据需要验证,就希望通过JS来完成,如此一来也可能希望表单数据提交一并在JS中完成,特别是,如果需要立即获取提交后的结果反馈,那么通过Ajax来实现将是最好的选择。...问题是,通常情况下,JS能获取的表单数据大多是文本或数字,如果遇到文件对象,该如何提交呢? 显然,文件对象不是简单的文本,JS直接从表单的文件对象控件里读取的值,也只是文件路径和文件名。...我们需要提交的是文件对象本身,它提交的过程中应该是二进制的文件数据流。那么,该如何提交,这里我们就需要介绍一下JS的FormData类了。...(JS及其Ajax代码) ? (服务端的代码以.NET MVC为例) 有兴趣的同学,复制以上代码,测试一下,多文件上传一招搞定哦!

2.8K20

关于ajax无刷新上传和下载

关于 ajax 无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的。 关于上传 使用 Flash, ActiveX 上传 ,略......fm.attachEvent("onload", load) : (fm.onload = load); 关于下载: 暴力一点的下载直接 window.open("/rest/donwload...缺点:现代浏览器会自动识别文件类型,如 pdf,会自动在浏览器打开 优雅一点的下载: function download() { var a = document.createElement("a"...aaa.txt"; var filename = "data.xlsx"; a.href = url; a.download = filename; a.click(); } 优点:解决了暴力下载自动打开文件的缺陷...上传下载通用。 最好的上传下载方式: 你们的 Boss 不要求兼容 ie 低版本浏览器 [完]

2.4K20

【jquery ajax】实现文件上传提交

作者主页: 作者主页查看更多前端教学 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 在这里看原生ajax实现文件上传 文章目录 JQuery实现文件上传提交...  定义UI结构   验证是否选择了文件   向FormData中追加文件并发起ajax请求   jquery实现loading效果   完整代码 JQuery实现文件上传提交   定义UI结构...} })   向FormData中追加文件并发起ajax请求 //上传文件 let fd = new FormData(...自jqueyr版本1.8起,该方法只能被附加到文档,$(document).ajaxStart()函数会监听文档内所有ajax请求,当ajax请求开始会触发这个函数,ajax结束则会触发ajaxStop...', files[0]); //发起jquery ajax请求 $.ajax({ method: 'post',

3.7K40
领券