HTMLタグ/フォームタグ/ファイルの送信欄を作る - TAG index
type="file" （ファイルの送信欄を作成） type属性の値に file を指定すると、ファイルの送信欄を作成できます。 name="" （部品の名前を指定） フォーム部品を識別するための名前を指定します。 この属性の値は、ファイルデータとセットで送信されることになります。 size="" （入力欄の幅を文字数で指定） 入力欄の横幅を文字数で指定します。 この属性を指定した場合でも、ブラウザにより見た目の幅は異なります。同じような幅で表示させたい場合は、スタイルシートで指定します。 SafariとChromeでは、この指定内容は反映されません。（入力欄が表示されないため） 使用方法 type="file" を指定すると、自動的に参照...（またはファイルを選択）と書かれたボタンが表示されます。 参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示され、選択を完了する
webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた
こんにちは。 セミが鳴き出しましたね。夏、嫌な季節です。 さて、Macで良いリネームアプリを探しているのですが、 なかなか決定版が見つからずに嘆いています。 そんな時ふと思いました。 (使ったことないけど)HTML5のFileAPI使えばリネームって出来るんじゃないか？ あと、いちいちファイルをチューザーからファイルを選択するのも面倒だし、 HTML5のDrag&DropAPI使ってブラウザにファイルをドロップできるようにしよう！ と思いFileAPIとDrag&DropAPIを調べてみたら、 ちょっとした小物を作るのにも地味に面倒だったのでメモを残します。 File APIとは？ File APIとは、HTML5で提供されているAPIです。 ローカルファイルやディレクトリの読み書きが出来るオブジェクトです。 例えば、バイナリデータを扱うBlobや、 ファイルの読み取りを行うFileRea
<input type="file">をカスタマイズ - Qiita
<input type="file">を頑張ってカスタマイズしました。 See the Pen form_file by d0ne1s (@d0ne1s) on CodePen. ポイント <input type="file">のデザインは変更できないので、display: noneで非表示にしています。 代わりにlabelとlabel:afterで、ボタンと「選択されていません」の文字列を表現しています。 ファイルが選択された時、label:afterを非表示にし、代わりに<span>ファイル名</span>を表示するようなjqueryを書きました。 同一ページ内に複数あっても動くようになってるはずです。（その場合、各input要素のidと、labelのforは適宜変更する必要があります。） 2020/04/27追記 jqueryを使わずに書けました。 See the Pen eYpvz
<input type="file"> - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
input type=”file”で選択できるファイルの拡張子を制限する方法
input type=”file”で選択できるファイルの拡張子を制限する方法 2018.12.26 HTML/CSS File, HTML, HTML5 <input type=”file”> で選択できるファイルの拡張子を制限する方法 <input type="file"> でファイルを選択できますが、この時選択できるファイルの種類(拡張子)を制御するには、accept 属性で拡張子もしくはMIMEを設定します。 複数の拡張子を設定もできますし、ワイルドカードを使うこともできます。以下一例です。 <!-- 拡張子 .pdf --> <input type="file" accept=".pdf"> <!-- MIME でテキストファイルを指定 --> <input type="file" accept="text/plain"> <!-- MIMEでワイルドカード指定(画像ファイル) -
画像をドラッグ＆ドロップでアップロードして並び替え - Qiita
画像をドラッグ＆ドロップでアップロード ＆ 画像をドラッグ＆ドロップで並び替える 方法をご紹介します！ 用途 webサイトとかで、施設に画像を結びつけて、かつ、それをソート順で表示したいとかあるときに使えるよ。 ついでに画像も削除できます。 ついでに画像に説明文も登録できます。 参考サイト https://codepen.io/malkafly/pen/gbVYZb ↑ほぼこれを丸パクリです。ありがとうございます！！！ 使うプラグイン みんな大好きDropzoneJS jQuey UIのSortable 私はここからyarnで追加しました コード html側 <form method="post" action="/api/v1/facility-image/upload/" id="my-awesome-dropzone" class="image-upload-area dropzon
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に
Chrome 78ベータに「Native File System API」搭載。Webブラウザからローカルファイルを読み書き可能に GoogleはWebブラウザのChrome 78ベータ版で「Native File System API」を試験的機能（Origin Trial）として搭載したことを明らかにしました。 Native File System APIはWeb Platform Incubator Community Groupが策定中のAPIで、Webアプリケーションからローカルファイルを開き、読み書きを行える機能です。 「The Native File System API: Simplifying access to local files」から引用します。 The Native File System API enables developers to build powe
File APIとCanvasでローカルの画像をアップロード→加工→ダウンロードする ｜ Tips Note by TAM
ユーザーのローカルにある画像をアップロード、ブラウザ上で加工して、加工後の画像をダウンロードする処理をFile APIとCanvasを使って実装してみます。 ■目次 Canvas上に画像を表示 File APIでアップロード File APIでアップロードした画像をCanvas上に表示 Canvas上で画像の加工 画像として出力 ダウンロードリンクを表示 1. Canvas上に画像を表示 まずはCanvas上にダミーで画像を表示させてみます。 See the Pen QqOyNp by tam_yi (@tam_yi) on CodePen. drawImage()メソッドでCanvas上に画像を表示させています。 2. File APIでアップロード File APIを使ってアップロードした画像をブラウザ上に表示してみます。 See the Pen dVZGOE by tam_yi (@
大容量！無料ファイル転送サービス8つ比較｜メールでファイルが送れない時に便利！
公開日：2015年9月20日最終更新日：2020年1月14日 : ソフト・アプリ・ツール 仕事で写真データや容量の大きいデータを相手に送る時、みなさんはどうしています？メールだと大体3M〜10M程度が上限なので、別の方法でないと一度に大きいファイルは送れません。 そんな時に大活躍するのが、今回紹介する『ファイル転送サービス』です。現在では、たくさんのサービスを無料で使うことができるので本当に便利です。web制作をしていると画像の他に、ai、psdなどの重いデータの送付も必要なのでこのサービスは、普段の仕事に欠かせません。 この記事では、無料で使用できるファイル転送サービスを比較してみます。容量の違いや、会員登録の有無、セキュリティ、サイトの使いやすさ、メール通知など、各サービスの違いを知っておくと便利に使い分けることができますよ。ファイルが大きくてメールが送れない！な人必見です！ GBファ
[nodejs] ファイルの読み書きにTRY
通常のJavaScriptではできないnodejs特有の機能の一つにサーバーサイドの「ファイル操作」があります。 クライアントブラウザでしか動作しない通常のjavascriptは、あくまでブラウジングの動的動作を行うことしか出来ないのですが、 サーバーサイドで操作しているnodejsは言語としてはjavascriptなんですが、サーバーにあるファイルをPHP連動をしなくても読み込めるし、CGIを連動しなくても、データを直接書き込むことも可能です。 プログラムの基本として「ファイルの読み書き」は、システムを構築する際に必須になる事なので、ファイルの読み書き関連をメモしておくことにします。 サーバーにはnodejsがインストールされている状態とします。 nodejsがインストールされていない場合は過去記事を参考にしてください。 Node.jsを短期学習してみる #1「インストール」 ファイルに
![[nodejs] ファイルの読み書きにTRY](https://cdn-ak-scissors.b.st-hatena.com/image/square/c480424204c759a962a2665ab72911bafb28fa90/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEiko4php1XCSdjxIFET19Ec1iJzXbi9TfvWgojJJUGCTVs16oqT1FOe2szRFd0I12-xPN_Lruboj-RpdTj4KpZZEW45gUXr91nzW38fAbZbd4FVNqEaATTv5LDoXTAvht6GRxYOB7WuQU_0nlMxKC2vYDZaLPsmKzwhjD0z3qyrEPVKViG5PTpQdPqZ%2Fw1200-h630-p-k-no-nu%2Fnodejs.jpg)
PHP の include, require で相対パスを指定して読み込む場合のメモ - hoge256ブログ
PHP の inlude や require で他のファイルを相対パスを指定して読み込む場合があります。 特に最近は PHP でもオブジェクト指向な感じでガリガリプログラムを書くことが多いので、細かく class ファイルに分かれたりして、さらに、include, require を活用することになるかと思います。 で、そんな時に問題になりやすいのが、include しているファイルの中で、またさらに別のファイルを include するような場合です。 例えば、次のようなディレクトリ構成で、 www/ |-index.php | |-func/ | |-function.php | |-class/ |-class.php 次のような include を行っていたとします。 www/index.php ファイル <?php include("func/function.php"); ?>
ファイル一覧を取得(ファイル更新日で降順) - - PHPの基本・リファレンス
ファイル一覧を取得(ファイル更新日で降順) ファイルの更新日時は filemtime関数で取得する事ができます。 usort(配列, 関数) 関数を用いれば配列に独自のソートを行う事ができます。 <?php // ディレクトリハンドルの取得 $dir_h = opendir( "./img/" ) ; // ファイル・ディレクトリの一覧を $file_list に while (false !== ($file_list[] = readdir($dir_h))) ; closedir( $dir_h ) ; $file_list2 = array() ; $i = 0 ; foreach ( $file_list as $file_name ) { //ファイルのみを表示 if( is_file( "./img/" . $file_name) ) { //$file_list2[N] の
フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版) - Qiita
はじめに フォームの入力の際に、入力に間違いがないかプレビュー表示する この機能を実現するためにFileAPIを利用する JavaScriptのFileAPIは2016年3月現在ほぼすべてのブラウザに対応している(IEさえも) 本サンプルコードはjQueryで動作します。 jQueryを使っていないのが知りたい人はこちらのフォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery"無し"版) を参照のこと Demo 動作を確認できるデモはこちら Demo 対象のコード $(function(){ //画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録 $('form').on('change', 'input[type="file"]', function(e) { var file = e.target.files[0],
ＰＨＰリファレンス（fgetcsv()）
fgetcsv( ファイルハンドル , [ サイズ , [ 区切り文字 , [ 囲み文字 ]]] ) fgetcsv()関数は、オープンしたCSVファイルから1行読み込み、指定された区切り文字で項目単位に分解した結果を配列で返します。 ファイルの終端に達すると、FALSEを返します。 サイズには読み込むバイト数を指定できます。 区切り文字は、各項目を区切る文字を指定します。デフォルトは、カンマ「,」になります。 囲み文字には、区切り文字で分解した各項目を囲む文字を指定できます。デフォルトは、ダブルコーテーション「"」です。 例１） CSVファイル「/temp/test.txt」をオープンして、1行づつ読み取り、表示します。 区切り文字はカンマ「,」（デフォルト）、囲み文字はダブルコーテーション「"」（デフォルト） <?php $filename = "c:/temp/test.txt";
PHPでメモリ上に一時ファイルを作る - Qiita
概要 PHPでファイルを変換したり、ダウンロードさせる処理を作る場合がある。 その時に、例えばダウンロードさせる処理の場合。 ユーザーにダウンロードさせた後はもういらない場合がよくある。 cronなどで自動的に消してもいいが、どうせなら最初から一時ファイルとして 扱ってしまえばいいのじゃないかと。 そんな時に便利なTips的な感じ。 /* 例えば文字コードを変換してダウンロードさせる場合 変換後のファイルは別にサーバーに残しておく必要がない （今回は、キャッシュの事はまた別次元として考える） */ //ローカルのファイルを読む $data = file_get_contents("data.csv"); // 文字コード変換 $data = mb_convert_encoding($data, "UTF-8", "Shift_JIS"); //ここでメモリ上にファイルを作成する $fp =
高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
Firefox でダウンロードするとファイル名が文字化けする現象を調査する修行 - 昨日知ったこと
とあるダウンロード機能で、Firefox だと文字化けするという現象の調査依頼。IE だと日本語を含むファイル名も意図した名前でダウンロードできが、Firefox だとファイル名が文字化けしてしまう。 どうやら、Content-Disposition レスポンスヘッダについたファイル名 (attachment; filename) のエンコーディングの解釈が IE と Firefox で違うらしい。EUC-JP のページにダウンロードするリンクがあるとき、Firefox は filename の値が EUC-JP で書かれていると判断し、IE は Shift-JIS で書かれていると判断する模様。 問題となったアプリでは、filename の値を明示的に Shift-JIS に変換していたので、IE で O.K.、Firefox で NG となった。 とりあえず該当アプリでは、USER_A
Bootstrap の File input の見た目を Cool にする - Qiita
概要 Bootstrap を使うと見た目がかなりキレイになりますが、まだまだイケてない部分があります。 例えば、Forms の File input。 汚い！！！せっかくその他のボタン等は綺麗なのに、もったいないですね。 そこで、少しでも見た目が Cool になるように改善したい思います。 今回は Bootstrap File Input というライブラリを導入してみました。 そして、このライブラリを利用して、実際に CSV ファイルをアップロードするための form を作ってみたいと思います。 お断り 本当は Bootstrap File Input を使うと、 例えば画像ファイルを選択した際にとても Cool なプレビューが表示されたりするのですが、 今回は CSV ファイルをアップロードするという用途に限定したいと思います。 気になる方は公式の デモ をご覧ください。 Bootstr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
input='file'要素のデザインをフルカスタマイズする | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
jsdo.it
