Я хочу отправить запрос на URL, который предоставляет мне диалоговое окно загрузки файла. В то же время серверу нужны определенные параметры в заголовке запроса. Я хочу вставить пользовательский заголовок в запрос и получить файл в ответ. Есть ли способ, которым мы можем достичь этого?
Загрузка файла AJAX с помощью настраиваемого заголовка
Ответ 1
Попробуйте использовать элемент a
с data-*
для заголовков для запроса, $.ajax()
с параметром headers
, установленным в a
element data-headers
object.
В $.ajax()
success
установите a
element href
в ответ как Blob
внутри objectURL
, download
атрибут file.name
или временное имя файла, вызовите .click()
on a
чтобы активировать диалог "Сохранить файл".
$(document).ready(function() {
$("input[type=button]").click(function() {
// set `data-headers` object
var el = $("[data-headers]");
el.data("headers")["x-custom-headers"] = $("input[type=text]")[0].value
|| el.data("headers")["x-custom-headers"];
$.ajax({
url: URL.createObjectURL(new Blob([$("textarea").val()], {
type: "text/plain"
})),
type: "GET",
// set `headers` to `a` element `data-headers` object
headers: $("[data-headers]").data("headers"),
beforeSend: function(jqxhr) {
console.log(this.headers);
alert("custom headers" + JSON.stringify(this.headers));
},
success: function(data, textStatus, jqxhr) {
var file = new Blob([data], {
"type": jqxhr.getResponseHeader("Content-Type")
});
console.log(data, file);
$("textarea, input[type=text]").val("");
$("a")
.attr({
"href": URL.createObjectURL(file),
"download": file.name || "file-" + $.now()
}).on("click", function() {
$(this).remove()
})
.get(0).click();
},
error: function(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<textarea maxlength="5" placeholder="echo"></textarea>
<br>
<!-- set `x-custom-header` to `input type="text"` value -->
<input type="text" maxlength="5" placeholder="set request header" />
<br />
<input type="button" value="download" />
<!-- set default `x-custom-header` to "123" -->
<a data-headers='{"x-custom-headers":"123"}'></a>
Ответ 2
Насколько я понимаю, вы хотите запросить файл из Интернета, для которого требуется заголовок аутентификации, но не может быть загружен простой ссылкой.
Что вам нужно сделать, так это сделать ajax-вызов с заголовком проверки подлинности, чтобы загрузить данные как blob. Затем сохраните данные с клиентской стороны
jQuery ajax/get методы не поддерживают ответType = blob
Итак, этот пример использует последний Fetch API в Blink и Firefox. Он также использует FileSaver.js, чтобы сохранить сгенерированный blob-клиент на стороне клиента и использовать проблемы с браузером.
fetch("/", {headers: {"X-mashape-key": "XXXXXX-4-YYYYYY"}})
.then( response => {
// we can get the filename if the
// response headers contains Content-Disposition
var cd = response.headers.get("Content-Disposition");
var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
response.blob().then(
blob => window.saveAs(blob, name || "index.html")
)
})
Он также использует некоторый новый синтаксис suger, который доступен в es6, который может быть переведен на es5 с помощью babel или traceur
Если вы не включаете fetch polyfill и должны поддерживать старые браузеры - тогда вам нужно сделать это по-старому с XHR
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.open("get", "/");
xhr.setRequestHeader("X-mashape-key", "XXXXXX-4-YYYYYY");
xhr.send();
xhr.onload = function(){
var cd = xhr.getResponseHeader("Content-Disposition")
var name = cd && cd.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
window.saveAs(xhr.response, name || "index.html")
}
Ответ 3
Возможно, я не понимаю.
Я думаю, что это так:
//server xxx.php
//omit some code
echo '<a href="file_path" id="download">file_name</a>';
//browser
ajax({
url: 'http://xxxx/xxx.php',
success: function(html){
//append to dom and TODO other manipulations
$(dom).append(html);
$('#download').trigger('click');
$(dom).remove(html);
}
})
Ответ 4
Хорошо, я проверил в старом приложении, которое у меня было, и вот образец. Вам нужно будет адаптироваться, но идея здесь.
Эта первая часть является частью атрибута перехватчика запроса, который помещается в WebMethod
. Весь перехватчик довольно сложный, поскольку он управляет несколькими случаями.
int byteSize = 262144;
byte[] data = new byte[byteSize];
if (!String.IsNullOrEmpty(myfileName))
{
_context.Response.AddHeader("Content-disposition", "attachment; filename=\"" + myfileName+ "\"");
}
_context.Response.ContentType = DefaultContentType;
_context.Response.Cache.SetCacheability(HttpCacheability.Private);
_context.Response.Cache.SetExpires(DateTime.UtcNow.AddHours(1));
_context.Response.Buffer = false;
_context.Response.BufferOutput = false;
_context.Response.AddHeader("Content-length", myStreamSize.ToString());
try
{
int counter = 0;
int bytesRead = mystream.Read(data, 0, byteSize);
while ((long)counter < myStreamSize|| bytesRead > 0)
{
counter += bytesRead;
if (bytesRead < byteSize)
{
byte[] outBuf = new byte[bytesRead];
Array.Copy(data, outBuf, bytesRead);
_context.Response.BinaryWrite(outBuf);
}
else
{
_context.Response.BinaryWrite(data);
}
bytesRead = mystream.Read(data, 0, byteSize);
}
}
finally
{
mystream.Close();
mystream.Dispose();
}
_context.Response.End();
Это вторая часть в Javascript на стороне клиента. Мы использовали ExtJS вместо jQuery.
downloadFile: function(url, getArgs) {
if( !this.iframe )
{
this.iframe = document.createElement("iframe");
this.iframe.className = "x-hidden";
document.body.appendChild(this.iframe);
}
var args = Ext.urlEncode(getArgs);
url = url + (args ? ("?" + args) : "");
this.iframe.src = url;
}
Щелчок кнопки вызовет эту функцию и даст ей URL-адрес WebMethod и, в конечном итоге, дополнительные аргументы. Идея со стороны JS заключается в создании скрытого iFrame, который будет использовать URL-адрес, и затем предложит пользователю загрузить.
Я надеюсь, что это поможет