JS処理ファイルフロー(画像の場合は現在のページに表示)
ajaxでピクチャリソースを要求し、サーバはファイルストリームとして返されます.
1、戻りタイプは「blob」に設定する必要があるので、元のajaxを使用する必要があり、jqを使用することはできません(理由:jqueryは戻りデータをstringに変換し、blobタイプをサポートしません)(もちろん、コンポーネントを導入してjqを拡張する能力も導入することができます.私が知っているのは、jquery-ajax-blob-arraybuffer.jsです).
2、FileReaderを使用してファイルストリームをbase 64形式に変換する.
3.1、その後、シミュレーションを通じてaタグをクリックしてこのファイルをダウンロードする.
3.2、またはimg要素のsrcプロパティに設定して、現在のページに表示できます.
3.1コード:
3.2コード:
1、戻りタイプは「blob」に設定する必要があるので、元のajaxを使用する必要があり、jqを使用することはできません(理由:jqueryは戻りデータをstringに変換し、blobタイプをサポートしません)(もちろん、コンポーネントを導入してjqを拡張する能力も導入することができます.私が知っているのは、jquery-ajax-blob-arraybuffer.jsです).
2、FileReaderを使用してファイルストリームをbase 64形式に変換する.
3.1、その後、シミュレーションを通じてaタグをクリックしてこのファイルをダウンロードする.
3.2、またはimg要素のsrcプロパティに設定して、現在のページに表示できます.
3.1コード:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // POST ，
xhr.responseType = "blob"; // blob
// ， /
xhr.onload = function () {
//
if (this.status === 200) {
// 200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // base64， a href
reader.onload = function (e) {
// ， a
var a = document.createElement('a');
a.download = 'data.xlsx';
a.href = e.target.result;
$("body").append(a); // firefox click
a.click();
$(a).remove();
}
}
};
// ajax
xhr.send()
3.2コード:
var xhr = new XMLHttpRequest();
xhr.open('POST', CONTACT_ACTION_FILES_DOWNLOAD, true);
xhr.setRequestHeader("Accept", "application/json;q=0.5");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.responseType = "blob"; // blob
// ， /
xhr.onload = function () {
//
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // base64， a href
reader.onload = function () {
$("#imgTest").attr("src", reader.result);
}
}
};
// ajax
xhr.send("filePath=" + filePath);