[解決済み] ファイル入力フォームからBase64文字列をjavascriptのファイルオブジェクトに変換する方法は?
2022-11-23 19:59:07
質問
ファイルから抽出したBase64String(例:"AAAAA...~")をjavascriptのファイルオブジェクトに変換したいのですが、どうすればよいですか?
javascriptのファイルオブジェクトとは、以下のようなコードです。
HTMLです。
<input type="file" id="selectFile" >
JSです。
$('#selectFile').on('change', function(e) {
var file = e.target.files[0];
console.log(file)
}
'file' 変数はjavascriptのファイルオブジェクトです。なので、base64の文字列をこのようにjavascriptのファイルオブジェクトに変換したいのです。
htmlのファイル入力フォームを使わずに、他のアプリがファイルからエンコードしたbase64文字列をデコードしてファイルオブジェクトを取得したいだけなのですが。
ありがとうございます。
どのように解決するのですか?
方法1: は dataURL に対してのみ有効で、他のタイプの url には有効ではありません。
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
console.log(file);
方法2。 はどのようなタイプのURLでも動作します(http url, dataURL, blobURL, etc...)
//return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
return (fetch(url)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], filename,{type:mimeType});})
);
}
//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt','text/plain')
.then(function(file){ console.log(file);});
関連
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)