我正在编写一段使用Stripe Connect API的代码,用户可以通过jQuery将input type="file"
中的可视化对象发送到 AJAX 调用,方法如下:
var form_file = new FormData();
form_file.append('file', document.querySelector('input#file_to_send').files[0]);
当用户提交表单时,我通过PHP将视觉效果复制到服务器上的一个文件夹中,并将其名称保存在一个会话变量中。如果表单中有错误或缺失,用户将返回到同一页面,在该页面中,视觉效果显示在input type="file"
元素下的img
元素中,因此用户知道他们的视觉效果已被考虑在内。
在那之后,我需要再次在 AJAX 调用中发送文件......除了这一次,文件不能再从input type="file"
中选择,我唯一可以访问的源将是从JavaScript中的img
元素中获取它的名称。
现在,如果我这样做:
var form_file = new FormData();
form_file.append('file', $('img#visual').attr('src'));
并通过相同的 AJAX 调用发送此消息:
$.ajax({
url: 'https://uploads.stripe.com/v1/files',
type: 'POST',
processData: false,
contentType: false,
headers: {'Authorization': 'Bearer xxxxxxxxxxxxxxxxx' },
data: form_file
}).fail(function(e) {
console.log('fail: ' + e);
}).done(function(e) {
console.log('file uploaded: ' + e.id);
});
我的问题,你猜对了,是:是否有方法/应该如何发送不是来自input
元素的文件作为源,而是来自img
元素的已定义路径?
2条答案
按热度按时间bf1o4zei1#
我又读了一遍你的问题。如果我理解正确的话,你需要发送一个跨域AJAX请求到www.example.com,所以你不是在控制服务器端的PHP代码,对吗?stripe.com, so you are not controlling the PHP code on the server side, right?
最简单的方法是用Javascript而不是PHP进行表单检查,这样就不需要返回并"丢失"所选的输入文件。
...*但是*如果您确实需要/想要仅使用其URL发送跨域文件,
则需要将数据URI转换为文件,然后附加到FormData:
1/获取图像base64值
2/将base64图像转换为Blob:
3/向您发送带有FormData的Blob:
资料来源:
通过使用Fetch API直接获取图像Blob,可以加快第1阶段和第2阶段的速度。
(警告:与IE不兼容)
来源:How to get a File() or Blob() from an URL in javascript?
vuv7lop32#
我能够实现我想要的!下面是我最终得到的代码:
如果有人需要这段代码并想一步一步地看到所发生的事情的结果,我在每一步都添加了console.log()。
之后,它可以通过 AJAX 发送到API。