ホーム / ハック / HTMLとjavascriptでアップロードされた複数のファイル名を取得する
HTMLとjavascriptでアップロードされた複数のファイル名を取得する | クロジカ
ホーム / ハック / HTMLとjavascriptでアップロードされた複数のファイル名を取得する
JavaScriptでアップロードするファイルの拡張子をチェックするサンプル
PHPでファイルをアップロードするサンプル PHPで複数ファイルをアップロードするサンプル に引き続き、ファイルのアップロードに関する記事です。 PHP側でもアップロードされる拡張子のチェックは当然するべきですが、アップロード処理が走る前にブラウザ側でチェックもしておきたいところ。これを無駄と感じるか、二重でもチェックはするべきと考えるかは人それぞれ。 例えば、アップロードを許可する拡張子の種類が変わった場合、JavaScriptとPHPの両方を修正しなければならないというメンテナンス上の問題もあります。 ちなみにぼくの場合はほとんどのサイトをPHPで作っているため、データベースのテーブルとかに許可する拡張子一覧を入れておいて、PHPでもJavaScriptでもそこを参照するような作りにすることが多いです。管理者しかアクセスできないようなページも作っておき、そこで拡張子の設定もできるように
FormDataでファイルもオブジェクトも一緒に送る方法 - Qiita
ハマった箇所 axiosでファイルも、オブジェクトも送りたいが、オブジェクトが[object Object]になってしまう。 なぜ送れなかったのか？ [FormData.append]（https://developer.mozilla.org/ja/docs/Web/API/FormData/append） The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string. FormDataに追加するときにValueはUSVStringかBlobにしてね、それ以外だと全部テキストにするよとのこと。 その為直接入れるのはNG storeFiles(re
File APIs(Blob, BlobURL, ArrayBuffer, FileReader) - Qiita
まえがき 以前の JavaScript はバイナリデータの扱いがとても下手でした。 バイナリデータをブラウザ上に一旦保存し再利用するには、サイズが1.3倍になることを覚悟した上でデータをDataURIに変換する必要がありましたし、XHRを使ってサーバからデータを取得する場合も、一度全てメモリに読み込んでから、ループでマスク処理を施し、Base64に変換し、DataURIに変換し… と、何重にも変換を繰り返す必要がありました。 2009年に出版された JavaScript Good Parts では、ビット演算子が「使うべきではない悪いパーツ」と評価されていた事を思い出す方もいるでしょう。 あれから5年、もはや時代が違います。 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ハードウェアと JIT コンパイラの進化に合わせ、大容量の
HTML5のFileオブジェクトを利用したファイルアップロード (JavaScript プログラミング)
HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。 概要 こちらの記事では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事では、HTML5で導入されたファイルオブジェクトを利用してファイルをアップロードするコードを紹介します。 プログラム コード 下記のコードを記述します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function ExecUpload() { var u
ファイルアップロードをドラッグ&ドロップでも可能にする - 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文で画像データが問題なく送られているかチェックします。問題がなければ４・５行目でアップロ
ブラウザでローカル画像をリサイズしてアップロード - Qiita
【2019/8/20】 多くの方に見ていただいている記事なので、改めてまとめ直しました。 https://www.mahirokazuko.com/entry/2019/08/20/133713 よくある画像アップロード機能を作ってみた😋 ◆ 要件 ・ フォルダにある画像を選択すると、小さくリサイズされたサムネが表示される ・ 送信ボタンを押すとリサイズ済みの画像がフォームデータとして送信される ◆ サンプル ↓ ファイル選択するとサムネを表示 上の画像、生データだと横幅6000pxくらいあります。最近のスマホで撮った写真はサイズが大きすぎるので、通信量を抑えるためにもリサイズしてアップロードは必須ですね。 ◆ コード ファイル取得→canvas描画→base64取得→Blob作成→Blob送信 という流れ <!-- ファイル選択ボタン --> <div style="width: 50
アップロードの進捗状況が分かるプログレスバー付きのJavaScript製ファイルアップローダー - Yahho Uploader [ゼロと無限の間に]
下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに“crossdomain.xml”という名前で保存する。（参考：Flashのドメイン間のデータロード許可） ただし、YUIのファイルを自分のサーバからロードする場合は不要。<?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="ajax.googleapis.com" /> </cross-domain-policy> 後は下記の例を参考に、アップローダーを組み込む<!-- Yahho Uploaderを読み込む --> <script type="text/javascript" src="path/to/your/yahho-uploader.js"></script> <!-- Yahho Uploader設置の
フォームからファイルを選択した際に、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],
ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」:phpspot開発日誌
Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript - Badass JavaScript ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」。 HTML5のAPIを使ってこうしたことが実現できるようになるみたいです。 ファイルが大きくなり、回線も太くなりますがブラウザベースだと落ちちゃったらまたやり直しと回線も無駄ですし、何より時間のムダですね。 こういった機能が広まれば沢山の人の無駄を減らせそうです 動作ムービーは以下に。 何年後かには当たり前になっていてそんな時代があったの？ということになるかもしれませんね githubにてソースが公開されています 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcan
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MAGAZINE｜イメジン – デザイン特化型クラウドソーシング
モダンなドラッグ＆ドロップ式アップローダーの実装ができる「jquery.filer」:phpspot開発日誌
it-swarm.dev
HTML5 – ファイルアップロード プログレスバー付 « Weblog it-azusa
https://www.dropzonejs.com/
jsdo.it