ホームページ >ウェブフロントエンド >jsチュートリアル >ajax経由でリフレッシュフリーアップロード・ダウンロードを実装する方法を解説した記事(詳細なコード説明)
前回の記事「windowを使ってEFIパーティションをマウントする方法を教えます(コード付き)」では、windowを使ってEFIパーティションをマウントする方法を紹介しました。 Ajax を使用して更新なしのアップロードとダウンロードを実装する方法については、次の記事を参照してください。必要な友人は参照してください。
Aboutajax
更新アップロードとダウンロードはありません
これは、コンテンツは少ないですが、頻繁に使用されるコンテンツです話さないという点については、あまり話すことがないのであまり話したくないのですが。
アップロードについて
使用Flash、ActiveX
アップロード、少し...
自分で書いてくださいXMLHttpRequest
// 准备FormData var formData = new FormData(); formData.append("key", value); // 创建xhr对象 var xhr = new XMLHttpRequest(); // 监听状态,实时响应 // xhr 和 xhr.upload 都有progress事件,xhr.progress是下载进度,xhr.upload.progress是上传进度 xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percent = Math.round(event.loaded / event.total); console.log("%d%", percent); } }; // 传输开始事件 xhr.onloadstart = function (event) { console.log("load start"); }; // ajax过程成功完成事件 xhr.onload = function (event) { console.log("load success"); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); console.log(ret); }; // ajax过程发生错误事件 xhr.onerror = function (event) { console.log("error"); }; // ajax被取消 xhr.onabort = function (event) { console.log("abort"); }; // loadend传输结束,不管成功失败都会被触发 xhr.onloadend = function (event) { console.log("load end"); }; // 发起ajax请求传送数据 xhr.open("POST", "/upload", true); xhr.send(formData);
var formData = new FormData(); formData.append("key", value); //传的参和值 $.ajax({ url: "XXX", type: "POST", data: formData, contentType: false, processData: false, success: function (res) {}, error: function () {}, });
を使用してください。ここで言いたいのは formData
です。このクソは IE10
、IE9
以降でのみ完全にサポートされました。半残留品です。そこで、私が話したいのは、form
と iframe
を組み合わせてこれを実現する 3 番目の方法です。原理は次のとおりです:
hidden form
form
の iframe
、target
は iframe
を指し、iframeload
をリッスンしてアップロード結果を取得します。
利点: ie
下位バージョンのブラウザと互換性がある
欠点: クロスドメイン アップロードはサポートされておらず、iframe オンロードのためカスタム リバース プロキシが必要です
クロスドメインはサポートされていません
アップロード インターフェイス API
: 成功した戻り値:
{ code: 1, msg: '上传成功' }
失敗した戻り値:
{ code: 0, msg: '上传失败' }
HTML:
<form action="xxxx" target="upload" enctype="multipart/form-data" method="post" style="display:none; " > ... .. </form> <iframe name="upload" id="upload"></iframe> <!-- JS: --> <script> var fm = document.getElementById("upload"); var load = function () { var doc = fm.contentWindow || fm.contentDocument; if (doc.document) doc = doc.document; var content = doc.body.textContent; //此处的值取决与API 接口返回的值 var data = JSON.parse(content); console.log(content); }; // 兼容低版本浏览器监听判断 fm.attachEvent ? fm.attachEvent("onload", load) : (fm.onload = load); </script>
より暴力的なダウンロードは直接です
window.open("/rest/donwload/abcd.do");
利点: コードが少なくなります。
欠点: 最新のブラウザは、pdf
などのファイル タイプを自動的に認識し、より洗練されたダウンロードのために
を自動的に開きます。
function download() { var a = document.createElement("a"); var url = "download/?filename=aaa.txt"; var filename = "data.xlsx"; a.href = url; a.download = filename; a.click(); }
利点: 暴力的なダウンロードでファイルが自動的に開く問題を解決します
欠点: post
ダウンロード##をサポートしません
#XMLHttpRequest、BLOB メソッドを使用します
function download() { var url = "download/?filename=aaa.txt"; 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(); }
利点: サポート postmethod
欠点: 未だに互換性の問題が残っています
したがって、互換性に対処する最善の方法は、form と
iframe を組み合わせることです (もちろん、どちらにしても
XMLHttpRequest です) Best)、この方法はアップロードとダウンロードの両方で完全にサポートされています。アップロードとダウンロードは共通です。
上司は、
ie下位バージョンのブラウザ
以上がajax経由でリフレッシュフリーアップロード・ダウンロードを実装する方法を解説した記事(詳細なコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。