axios で添付ファイルありのリクエスト(multipart/form-data の POST)はじめにaxios で、添付ファイルありのリクエストを送信する方法を整理した。 【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム を参考にさせてもらった。 TL;DR FormData の append でデータを構築 Request Config の transformRequest でも対応できるかも？(未検証) FormData はブラウザのみなので、CLI ツールなどは別フォーマットを使う必要がありそう
globalThis - JavaScript | MDN
解説 従来、グローバルスコープにアクセスするには、JavaScript 環境ごとに異なる構文を必要としていました。ウェブ上では window, self, frames を使うことができます。しかし Web Worker は self のみを利用することができます。Node.js はこれらのいずれも利用できず、代わりに global を使用する必要があります。 this キーワードは、厳格でないモードで実行されている関数の中で使用することもできますが、厳格モードで実行されているモジュールや関数の中では undefined になります。Function('return this')() を使用することもできますが、CSP などによって eval() を無効にしている環境では、この方法でも Function の使用が抑制されます。 globalThis プロパティは、環境を越えてグローバルな
ファイルアップロードをドラッグ&ドロップでも可能にする - webプロダクトいんふぉ
ファイルアップロードするには？ フロント側のHTMLもしくはPHPファイルにフォームの記述をします。 <form action="" method="post" enctype="multipart/form-data"> <input type="file" value="ファイルを選択" name="image"> <input type="value" value="送信"> </form>画像を扱う場合にはenctype部分が必須になります。他にもinputタグにaccept属性を指定することにより、画像の形式をpng、jpgのみ受け付けるようにすることなどもできますが、今回は必要最低限で説明していきます。 次に画像ファイルを受け取る裏側を書いていきます。詳しくは説明しないんですが、１行目のif文で画像データが問題なく送られているかチェックします。問題がなければ４・５行目でアップロ
JavaScriptメモ: 使用している Web ブラウザが IE (Internet Explorer) かどうか判別する
JavaScript で IE かどうかを判別するIE 判別関数 (isIe)navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { const ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意
JavaScriptでチェックボックスの選択状態を取得する - ポップインサイト
ここでは、JavaScript でチェックボックスがチェックされているかどうかを判定する方法について説明します。チェックボックスの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。 チェックボックスに同じ name 属性が付与されている場合 ひとまとまりのチェックボックスに対して同じ name 属性が与えられている場合、name 属性を使って各チェックボックスを特定し、それぞれのチェックボックスの checked プロパティが true か否かを順番に調べます。次のサンプルプログラムを見てみましょう。 HTML <form name="form1"> <input type="checkbox" name="fruits" value="りんご">りんご<br> <input type="checkbox" name="fruits" value
Javascriptで指定した配列の要素を削除する - Qiita
Javascriptで指定した配列の要素を削除する Javascriptで指定した配列の要素を削除する。 なお、本記事は[Javascript] 配列から特定の要素を削除する(訂正有り) - Qiitaを大変参考にさせていただいた。 ポイント(以下は、ES6以降ではあんまり推奨されないので、追記を参照。) 1. array.forEachで、配列の各要素とindexの数字を各処理で使用する => 参考 :Array.prototype.forEach() - JavaScript | MDN 2. 配列の要素が、指定した値(今回は1)だったら、3の処理を行う 3. array.spliceでindex番目から1個分の要素を削除する => 参考 :Array.prototype.splice() - JavaScript | MDN コード 0~4の配列から1を指定し、削除する。 const
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
Lodashを使って2つのオブジェクトのDiffを抽出する - tacamy--blog
JavaScriptで2つのオブジェクトの差分を出したいとき、Lodashの omitBy を使うと簡単に書けた。 const before = { a: 1, b: 2, c: 3 } const after = { a: 0, b: 1, c: 3 } const diff = _.omitBy(after, (v, k) => before[k] === v) この場合、 diff の結果は👇こうなる。 console.log(diff) // { a: 0, b: 1 } 差分がない場合は空のオブジェクトが返ってくる。 ちなみに、 omitBy の第一引数に渡すオブジェクトのkeyとvalueを基にしてもうひとつのオブジェクトの値と比較してるから、👇こんな感じだとDiffは出ない。 after は a っていうkeyしか持ってないから。 const before = { a:
ネストされたJavaScriptのオブジェクトをフラットにするhughsk/flatというライブラリ - くらげになりたい。
ネストされたObjectをフラットにしたいなと思ってたら、いいライブラリが。 hughsk/flatを使ったらすぐできたので、その備忘録。 サンプルは、GitHubあるREADME.mdの抜粋です。 インストール $ npm install flat 使い方2: ネスト→フラット const flatten = require('flat'); const flattedObj = flatten({ key1: { keyA: 'valueI' }, key2: { keyB: 'valueII' }, key3: { a: { b: { c: 2 } } } }); console.log(flattedObj); // { // 'key1.keyA': 'valueI', // 'key2.keyB': 'valueII', // 'key3.a.b.c': 2 // } 使い方2
ブラウザでローカル画像をリサイズしてアップロード - Qiita
【2019/8/20】 多くの方に見ていただいている記事なので、改めてまとめ直しました。 https://www.mahirokazuko.com/entry/2019/08/20/133713 よくある画像アップロード機能を作ってみた😋 ◆ 要件 ・ フォルダにある画像を選択すると、小さくリサイズされたサムネが表示される ・ 送信ボタンを押すとリサイズ済みの画像がフォームデータとして送信される ◆ サンプル ↓ ファイル選択するとサムネを表示 上の画像、生データだと横幅6000pxくらいあります。最近のスマホで撮った写真はサイズが大きすぎるので、通信量を抑えるためにもリサイズしてアップロードは必須ですね。 ◆ コード ファイル取得→canvas描画→base64取得→Blob作成→Blob送信 という流れ <!-- ファイル選択ボタン --> <div style="width: 50
chrome コードでウィンドウを取り扱う - Mozilla | MDN
この文書では、Mozilla の chrome コード (XUL アプリケーションや 拡張機能) の中で複数のウィンドウを取り扱う方法を解説します。また、新規ウィンドウを開く、すでにウィンドウが開いているか確認する、異なるウィンドウ間でデータを受け渡すといった場面での tips やサンプルコードを紹介します。 新規ウィンドウを開くためには、通常は window.open もしくは window.openDialog の DOM メソッドを次のように呼び出します。 var win = window.open("chrome://myextension/content/about.xul", "aboutMyExtension", "chrome,centerscreen"); window.open の 1 つめのパラメータはウィンドウとその内容を記述した XUL ファイルの URI です。
jsやcssファイルのバージョン化
laravel-mixの続きです。まだ続きそうなので、連載ものにしました。右にリストされているCATEGORIESのフロントエンドの開発です。 今回は、laravel-mixで作成されたjsやcssのファイルがどのようにbladeで参照されているかにフォーカスします。 asset() 再びレイアウトのbladeファイルの中身を以下に掲載します。 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" conte
String.prototype.repeat() - JavaScript | MDN
P�mપ Learn Learn web development Frontend developer course Getting started modules Core modules MDN Curriculum Check out the video course from Scrimba, our partner Learn HTML Structuring content with HTML module Learn CSS CSS styling basics module CSS layout module Learn JavaScript Dynamic scripting with JavaScript module
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0
FormDataオブジェクトの中身を確認する方法 – ysklog
モダンなドラッグ＆ドロップ式アップローダーの実装ができる「jquery.filer」:phpspot開発日誌
https://www.it-swarm-ja.tech/ja/javascript/2%E3%81%A4%E3%81%AEjson%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AEdiff%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/941100235/
ネストされたオブジェクト間の差分を取得する方法 | teratail
lodash自分用メモ Array - Qiita
TechAcademy [テックアカデミー]![TechAcademy [テックアカデミー]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c295330d4f51d6ba69336c6835b47fb606bfd53/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechacademy.jp%2F_nuxt%2Fogp%2Fog-image.jpg)
