JS 下载文件（图片等）不跳转和提交表单

最新推荐文章于 2022-08-05 09:50:13 发布
最新推荐文章于 2022-08-05 09:50:13 发布
阅读量1.9k 收藏
点赞数
分类专栏： JavaScript 酷酷的刘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kukudeliu/article/details/89764320
版权 
var a = document.createElement('a');
a.href = res.url; //图片地址
a.download = res.name; //图片名及格式
document.body.appendChild(a);
a.click();
酷酷的刘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
prototype -通过js提交表单，局部刷新不跳转
03-28
这就是"prototype - 通过js提交表单，局部刷新不跳转"的核心思想。 首先，我们需要了解Prototype中的`Form.Element`和`Form`类。`Form.Element`提供了对表单元素的便捷操作，如获取或设置值，而`Form`类则用于处理...
js通过文件路径下载文件而不跳转页面
最新发布
BillyYang的专栏
07-05 2395
【代码】js通过文件路径下载文件而不跳转页面。
表单页面提交后不跳转的处理方法
hslisz的博客
08-05 4000
表单页面提交后不跳转、表单域校验提示提交成功，并重置当前页面、实现上传文件多选
form表单action提交表单，页面不跳转且表单数据含文件的处理方法
weixin_30663471的博客
08-20 698
在最近的项目中需要将含 input[type='file']的表单提交给后台 ，并且后台需要将文件存储在数据库中。之前所用的方法都是先将文件上传到七牛服务器上，然后七牛会返回文件的下载地址，在提交表单的时候将文件的下载地址和其他表单元素一起提交即可。但是现在考虑到安全性，这些文件不能上传到七牛服务器上，得直接提交给后台存储到数据库中，在此需要注意以下问题： 1、提交表单时，如果要提交file...
js 下载文件（常见类型：图片、视频、文档），不跳转新页面，亲测可用
weixin_42289080的博客
04-08 1459
废话不多说，直接上代码。 url 传入文件的全链接，fileName 可以为文件设置名字 /** * 直接下载指定链接 * @param {*} url 全链接 * @param {*} fileName 文件名字 */ export function DOWLOAD_FILE (url, fileName) { fetch(url).then(res => res.blob().then(blob => { var a = document.createElement('a
#前端小tips# 无需跳转新页面,动态生成a标签实现下载功能
沛雯的博客
04-26 960
我遇到的需求是下载页面上的table到本地,成Ecel格式.原本使用的控件有这个功能,但因为要在下载的同时修改Excel的sheet名和部分样式,所以就让后端做了. 后端把表格做好,提供一个url给我们前端,接下来我们只要做好触发下载就行了.其实只要几行代码就可以: 动态生成a标签-->赋值href和download(最重要的就是这个href,一...
Vue axios 中提交表单数据(含上传文件)
12-02
在Vue.js应用中，我们经常需要处理表单数据的提交，包括上传文件。在本例中，我们将讨论如何使用axios库来实现这个功能。axios是一个基于Promise的HTTP库，可以在浏览器和node.js环境中使用，非常适用于前端开发。 ...
提交表单后转到另一个文件
09-28
在HTML（超文本标记语言）中，提交表单并跳转到另一个文件是常见的功能，通常用于用户输入数据后向服务器发送请求，并在处理完成后重定向到新的页面。要实现这个功能，你需要正确配置`<form>`标签的`action`属性和`...
javaWeb实现文件的上传和下载(可以返回上一级目录)server.zip
08-10
当用户选择文件并提交表单时，服务器接收到的请求类型是`POST`，且Content-Type为`multipart/form-data`。我们可以使用` Commons FileUpload`库来解析这种类型的请求，获取上传的文件。以下是一段基本的文件上传处理...
form表单提交不跳转的方式
10-08
form提交后不跳转，增强用户体验。 工程采用jquery写前端，struts2做一个跳转返回数据。
javascript表单验证和Window详解
12-11
JavaScript是Web开发中不可或缺的一部分，尤其在处理表单验证和用户交互方面发挥着重要作用。本文将深入探讨JavaScript中的表单验证以及Window对象的使用。 ### 一、表单验证 表单验证是确保用户在提交数据之前...
form提交表单（下载）且不跳转
classOurself的博客
07-26 528
var temp_form = document.createElement('form') var temp_ifr = document.createElement('iframe') // 设置form属性 temp_form.action = url + '&scope=' + scope temp_form.target = 'form_iframe' temp_form.method = 'post' temp_form.style.display = 'none' temp_ifr.
js 下载文件（常见类型：图片、视频、文档/PDF文件），不跳转新页面
前端，请指教
08-12 999
/** * 直接下载指定链接 * @param {*} url 传入文件的全链接 * @param {*} fileName 文件名字 */ function DOWLOAD_FILE (url, fileName) { fetch(url).then(res => res.blob().then(blob => { var a = document.createElement('a') var url = window.URL.createObjectURL(blo
JS文件下载，文件下载页面跳转出现空白页解决办法
热门推荐
Moreisy的小镇
12-13 1万+
文件下载出现空白页或页面跳转，是因为直接用文件地址跳转window.open或者location.href这种方式会有页面跳转的情况出现。 下面看怎么解决这个问题 例子 方案一（推荐）：用js触发<a>标签点击事件 var downLoad=function(src){ var a = document.createElement('a'); a.id = 'expe...
JS 带token的且不跳转页面的下载文件方式 - Kaiqisan
Kaiqisan的博客
08-19 1362
JS 下载文件的方式 ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである，做项目的时候，碰到了一些私密文件的下载需要事先上传用户token凭证，所以这导致无法直接使用a标签添加地址直接从后端获取数据，所以，今天打算放下封装好的方法，从头开始。 针对下载需要使用token验证身份的时候使用。 现在以axios为例来说明方式 /* a.js */ import axios from 'axios' // 其他导包方法详见官网 axios({ methods: 'get', //
js实现通过url下载文本/图片/视频且不跳转新页面
zhangx
02-21 4668
网上无数下载的方法，先挨个试试看好不好用，不好用再用此方法 ajax(url, callback, options) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open('get...
文件下载 不跳转
afdasfggasdf的博客
01-14 1137
https://blog.csdn.net/zhoumengshun/article/details/71405963 var input =$("&lt;input&gt;"); input.attr("name","id"); input.val(row.id); v...
用layui写一个js的下载和提交表单功能
05-16
下面是基于 layui 的下载和提交表单功能的示例代码： HTML 代码： ```html <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">文件名</label> <div class="layui-input-block"> <input type="text" name="filename" placeholder="请输入文件名" lay-verify="required" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">文件</label> <div class="layui-input-block"> <input type="file" name="file" lay-verify="required"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitForm">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> ``` JavaScript 代码： ```javascript layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; // 监听表单提交 form.on('submit(submitForm)', function(data){ // 构造 FormData 对象 var formData = new FormData(); formData.append('filename', data.field.filename); formData.append('file', data.elem[2].files[0]); // 发送 POST 请求提交表单 $.ajax({ type: 'POST', url: '/api/submit', data: formData, processData: false, contentType: false, success: function(res){ if (res.code === 0) { // 提交成功，弹出成功提示框 layer.alert('提交成功', { icon: 1 }); } else { // 提交失败，弹出失败提示框 layer.alert('提交失败：' + res.msg, { icon: 2 }); } }, error: function(xhr){ // 提交失败，弹出失败提示框 layer.alert('提交失败：' + xhr.statusText, { icon: 2 }); } }); return false; // 阻止表单跳转 }); // 监听下载按钮点击 $('.download-btn').on('click', function(){ var url = $(this).data('url'); // 创建隐藏的下载链接并点击 $('<a href="' + url + '" download></a>')[0].click(); }); }); ``` 其中，提交表单的接口为 `/api/submit`，返回格式应该为 `{code: 0, msg: '提交成功'}` 或 `{code: 1, msg: '提交失败'}`。下载按钮需要设置 `data-url` 属性为下载链接。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值