[B! input] kjtecのブックマーク

[CSS]フォームの input type=file のボタンデザインを変更する方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。オリジナルボタンのデザインサンプルボタンのデザインサンプルは以下の通りです。 .file { display: inline-block; overflow: hidden; position: relative; padding: 1em; border: 1px solid #dd0000; background: #dd0000; color:#fff; } .file input[type="file"] { opacity:

kjtec 2017/04/05

input
CSS

リンク

enctype='multipart/form-data'ってなんだ？ - MUGENUP技術ブログ

こんにちは、MUGENUPアルバイトの倉成です。今回は僕が前々から気になっていた、フォームからファイルを送信するときのおまじないenctype="multipart/form-data"について調べてみたので、得られた知識をまとめて見ようと思います。また、マルチパートの情報を検索していると、HTMLのフォームだけではなく、メールのマルチパートの情報に当たることも多くありました。調べてみると、HTMLの仕様と電子メールの仕様が似ているのは、どうやら歴史的な経緯があるようなので、後半ではインターネット成長の歴史についても少しだけ触れてみようと思います。 multipart/form-data: ファイルを送るおまじないそれでは、フォームでファイルをアップロードするシチュエーションを考えましょう。ファイルアップロードをする場合input要素は<input type="file" />を

kjtec 2017/04/05

multipart

input

リンク

iPhone ＆ FileAPI で日本語タイトルのファイルを利用する方法

環境 iPhone6 UserAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B150 Safari/602.1 iPhone からファイルアップロードを利用するため FileAPI を利用しています。 PC上、iPhone から共に日本語をファイル名に含まないファイルのアップロードは問題ないのですが、iPhoneから日本語をファイル名に含むファイルをアップロードしようとするとうまく行きません。調べてみると File API でファイルを選択(フォトライブラリやDropboxから)した時点で fileサイズが0となり、アップロードの前段階で失敗しているようです(以下で動作確認できます)

kjtec 2017/03/30

ファイル名が日本語の時の現象。自分は結局、0サイズのファイルは警告をだして非対応にする対応にした。

jQuery
input

リンク

FormData - Web API | MDN

FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これはfetch()、XMLHttpRequest.send()、navigator.sendBeacon() の各メソッドを用いることで送信が可能です。エンコーディング型を "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。単純な GET の送信を用いる <form> が行うようなクエリー引数を生成したい場合は、URLSearchParams コンストラクターに直接渡すことも可能です。FormData を実装したオブジェクトは、entries() の代わりに for...of 構造の内部で直接使用できます。for (const p of myFormData) は for (const

kjtec 2017/03/21

FormData

リンク

1-5. hiddenは危険（セッション変数を利用しよう）

kjtec 2017/02/15

リンク

【JavaScript & HTML5 】文字コードに関係なくテキストファイルを正しく読み込む - のんびり猫プログラマの日常

ブラウザ上で編集する﹁Webテキストエディタ﹂を作るという案件がありまして。まず︻既存のテキストファイルを読み込む︼というところで引っかかったので覚書しとく。テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくてはお話にならないのだ。そこでググりながら作ったよ、もう。1　File APIを使ってみる HTML5になって、ローカルファイルを手軽に扱えるようになったね。そう、File APIっていうのを使ってみようよ。 www.html5rocks.com このページに書いてある、ファイル読み込み時のオプション。これが大切です。以下、そのまま引用。 File 参照を取得したら、FileReader オブジェクトを

kjtec 2017/02/13

リンク

http://www.webmagazine.kakisiti.co.jp/?p=690

kjtec 2017/02/13

*PHP
input

リンク

Androidデフォルトブラウザで隠れたinput type="file"のダイアログを出す方法 - 宇宙農業開拓史

久々に書くけどちょっと真面目にこれはハマったんでメモファイルとかアップロードに使うinput type="file"だけど、ぶっちゃけデザインがダサいので裏側に隠していい感じの画像をクリックするとダイアログが開いて選択できるといいとおもったんでやってみた。下記のやつを参照してみた。 input:file 要素を表示しないで、ファイルをアップロード PCやiPhoneだとうまくいったんだけどAndroidのデフォルトブラウザでやってみたらダイアログが開かれない。なぜだ… alertデバッギングをしてみるとclickイベント自体はちゃんと動いているっぽいいろいろ悩んでいたところjsdo.itにいい感じのテスト用のやつがあったんでここでいろいろ試してみた。 input type="file"のダイアログを、JavaScriptから開けるかのテスト検証した結果、表示されてない(style=

kjtec 2017/02/10

*HTML
input

リンク

＜input type=”file”＞の話 | Tech Blog | CRESCO Tech Blog

こんにちは、技術研究所の ton です。今回は、以前ご紹介した社内イベント﹁クレスコフェア﹂の出展作品開発時に、びみょーに苦戦した<input type=”file”>について語ります。 HTML5＋JavaScript＋PHPで<input type=”file”>を使ってファイルアップロード機能をつくります。途中のサンプルコードはそれだけで︵たぶん︶動くようになっているので、よろしければお試しください。

kjtec 2017/02/10

*HTML
input

リンク

หน้าแรก

kjtec 2017/02/02

Javascriptでのファイルアップロード/すごく参考になりました。

リンク

FileReader.readAsDataURL() - Web API | MDN

readAsDataURL メソッドは、指定されたBlobまたは File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。メモ: blobの result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。

kjtec 2017/02/02

Javascriptでのローカルファイルの読み込み

リンク

input:file 要素を表示しないで、ファイルをアップロード | @jsakamoto

﹁Upload image...﹂と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty

kjtec 2017/01/25

*HTML
input

リンク

【jsで無理やりごにょごにょ編】No.14 input[type=“file”]要素をデザインするワザ - 2015/03/04 [Schoo]

2015年2月21日に開講された、株式会社LIG フロントエンドエンジニア堀口誠人先生による授業の中で、お届けできなかった14番目のテクニックをご紹介いたします。 ■先生より授業中にご紹介できなくて本当にすみませんでした。いかに授業を面白くしようか、どんなボケを入れようか、などと試行錯誤していたら肝心のソースコードが機能しないという本末転倒な自体になってしまったようです。猛省しております。この場を借りて改めて解説させていただきます。。。！ ■使用するツールのURL http://codepen.io/seito2014/pen/VYxZKw ■対応ブラウザ IE9~ safari︵最新︶ chrome︵最新︶ firefox︵最新︶ Android 4.1~ iOS 7.1~ 内容はCSSとJavascriptを使って﹁input[type=“file”]要素をデザインできるよう