我正在使用Stripe Connect API撰寫一段代碼，其中用戶可以input type="file"通過 jQuery將視覺物件從 an 發送到 AJAX 呼叫，方式如下：
var form_file = new FormData();
form_file.append('file', document.querySelector('input#file_to_send').files[0]);
當用戶提交表單時，我通過 PHP 將視覺物件復制到我服務器上的檔案夾中，并將其名稱保留在會話變數中。如果表單中的某些內容不正確或缺失，用戶將回傳同一頁面，其中視覺效果顯示在該頁面img下方的元素中input type="file"，因此用戶知道他們的視覺效果已被考慮在內。
在那之后，我需要再次在 AJAX 呼叫中發送檔案......除了這一次，不能再從檔案中選擇檔案input type="file"，我唯一的可訪問源是從imgJavaScript 中的元素中獲取它的名稱。
現在，如果我這樣做：
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元素中獲取的定義路徑？
uj5u.com熱心網友回復：
我第二次閱讀了你的問題。如果我理解正確，您需要向stripe.com發送跨域 AJAX 請求，這樣您就不會在服務器端控制 PHP 代碼，對嗎？
簡短回答：
最簡單的方法是使用 Javascript 而不是 PHP 進行表單檢查，因此您無需回傳并“丟失”所選的輸入檔案。
...但是如果您真的需要/想要僅使用其 URL 發送跨域檔案，
那么您需要將Data URI轉換為 File 然后附加到 FormData：
1/ 獲取圖片 base64 值
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
2/ 將 base64 影像轉換為 Blob ：
function DataURIToBlob(dataURI: string) {
const splitDataURI = dataURI.split(',')
const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
const mimeString = splitDataURI[0].split(':')[1].split(';')[0]
const ia = new Uint8Array(byteString.length)
for (let i = 0; i < byteString.length; i )
ia[i] = byteString.charCodeAt(i)
return new Blob([ia], {
type: mimeString
})
}
3/ 使用 FormData 向您發送 Blob ：
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg')
來源：
- 將影像 url 轉換為 Base64
- https://pretagteam.com/question/how-to-append-an-image-from-url-to-a-formdata-javascript
- https://www.geeksforgeeks.org/how-to-convert-data-uri-to-file-then-append-to-formdata/
編輯：
您可以通過使用Fetch API直接獲取影像 Blob來加速階段 1 和 2 。
（警告：與 IE 不兼容）
來源：如何從 javascript 中的 URL 獲取 File() 或 Blob()？
uj5u.com熱心網友回復：
謝謝@e-telier！在將您的代碼示例與您建議的鏈接上的內容相結合后，我能夠實作我想要的！這是我最終得到的代碼：
var visual_source = 'upload/file-source.png';
var visual_ext = visual_source.split('.').pop();
var visual = await fetch(visual_source);
console.log(visual);
var visual_as_blob = await visual.blob();
console.log(visual_as_blob);
var visual_as_file = new File([visual_as_blob], 'file-name-renamed.' visual_ext, { lastModified: new Date().getTime(), type: visual_as_blob.type });
console.log(visual_as_file);
form_file.append('file', visual_as_file);
如果有人需要此代碼并希望逐步查看正在發生的事情的結果，我會在此的每個步驟中添加一個 console.log()。步驟是：
- 我們從給定的 url 獲取檔案（這里是服務器上“上傳”檔案夾中的檔案）
- 我們將獲取的資料設定為 blob
- 我們將 blob 轉換為檔案
- 然后我們可以將檔案 append() 附加到 FormData() 元素
之后，它可以通過ajax發送到Stripe API。
再次感謝你的幫助！！:))
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388231.html
標籤：javascript 查询 阿贾克斯 邮政 表单数据