CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
こんにちは、MUGENUPアルバイトの倉成です。 今回は僕が前々から気になっていた、フォームからファイルを送信するときのおまじないenctype="multipart/form-data"について調べてみたので、得られた知識をまとめて見ようと思います。 また、マルチパートの情報を検索していると、HTMLのフォームだけではなく、メールのマルチパートの情報に当たることも多くありました。 調べてみると、HTMLの仕様と電子メールの仕様が似ているのは、どうやら歴史的な経緯があるようなので、後半ではインターネット成長の歴史についても少しだけ触れてみようと思います。 multipart/form-data: ファイルを送るおまじない それでは、フォームでファイルをアップロードするシチュエーションを考えましょう。 ファイルアップロードをする場合input要素は<input type="file" />を
環境 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となり、アップロードの前段階で失敗しているようです(以下で動作確認できます)
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは fetch()、XMLHttpRequest.send()、navigator.sendBeacon() の各メソッドを用いることで送信が可能です。
ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。 まず【既存のテキストファイルを読み込む】というところで引っかかったので覚書しとく。 テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、 中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・ そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては お話にならないのだ。 そこでググりながら作ったよ、もう。 1 File APIを使ってみる HTML5になって、ローカルファイルを手軽に扱えるようになったね。 そう、File APIっていうのを使ってみようよ。 www.html5rocks.com このページに書いてある、ファイル読み込み時のオプション。 これが大切です。以下、そのまま引用。 File 参照を取得したら、FileReader オブジェクトを
久々に書くけどちょっと真面目にこれはハマったんでメモ ファイルとかアップロードに使うinput type="file"だけど、 ぶっちゃけデザインがダサいので裏側に隠していい感じの画像をクリックするとダイアログが開いて選択できるといいとおもったんでやってみた。下記のやつを参照してみた。 input:file 要素を表示しないで、ファイルをアップロード PCやiPhoneだとうまくいったんだけどAndroidのデフォルトブラウザでやってみたらダイアログが開かれない。なぜだ… alertデバッギングをしてみるとclickイベント自体はちゃんと動いているっぽい いろいろ悩んでいたところjsdo.itにいい感じのテスト用のやつがあったんでここでいろいろ試してみた。 input type="file"のダイアログを、JavaScriptから開けるかのテスト 検証した結果、表示されてない(style=
こんにちは、技術研究所の ton です。 今回は、以前ご紹介した社内イベント「クレスコフェア」の出展作品開発時に、びみょーに苦戦した<input type=”file”>について語ります。 HTML5＋JavaScript＋PHPで<input type=”file”>を使ってファイルアップロード機能をつくります。 途中のサンプルコードはそれだけで（たぶん）動くようになっているので、よろしければお試しください。
readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。
「Upload image...」と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。 そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。 アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。 この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty
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”]要素をデザインできるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く