デモ HTML <div class="file"> ファイルを選択 <input type="file"/> </div> CSS .file { display: inline-block; overflow: hidden; position: relative; padding: .5em; border: 1px solid #999; background-color: #eee; } .file input[type="file"] { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); position: absolute; right: 0; top: 0; margin: 0; font-size: 100px; cursor: pointer; } 対応ブラウザ 以下のブラウザ
前置き スマートフォンブラウザで画像アップロードしたいという要件があったので、あんまり無理しないで実装できるとこまでやったら、どうなるのかやってみた。 やりたいことは、アップロードに加えて、画像データにリサイズ処理を適用すること。さすがに3G回線で2MB近い画像データを、input[type="file"]でそのまま送りつけるのは無理がある。 某所で書いたブツの要約版なので、某所のほうを見た諸氏はアレでソレして解釈してください : ) サンプルコード 基本方針としては、以下のようなコードで処理することになる。 var elFileInput = document.getElementById('js-select-photo'), elPreview = document.getElementById('js-preview-photo'), createObjectURL = windo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く