GitLab.com
はじめに 今回はjQueryでも大人気の「Dropzone」ライブラリのVueJS版をご紹介します。 環境 Vue.js: 2.6.10 vue2-dropzone: 3.5.9 インストール 以下のnpm、yarnのどれか一つを使ってインストールします。 npm npm install vue2-dropzone yarn yarn add vue2-dropzone gitリポジトリは以下から取得できます。 https://github.com/rowanwins/vue-dropzone 導入手順 1. ライブラリの取り込み 1.1 webpack等の場合 import vue2Dropzone from 'vue2-dropzone' import 'vue2-dropzone/dist/vue2Dropzone.min.css' export default { name: 'a
30 Free HTML5, CSS3, jQuery Upload File Form Script Designs The design industry is probably one of the fastest growing. New and creative websites are being created every day, pushing the limitations of HTML & CSS in every direction. CSS has come a long way from formatting the structured content. It was used to control layout of documents precisely and to apply different layouts to media types. Mod
Before Basic HTML input file Now Your so fresh input file — Default version You can add a default value You can set the height You can combine options You can disabled the input Also with a default file You can add a max file size You can disable remove button You can use events You can destroy it Init/Destroy Multiple options are available Only portrait or square images, 2M max and 2000px max-hei
【追記 2013/10/24】 サンプルをアップしました。 https://github.com/pospome/DropzoneJsSample 【追記 2013/09/13】 CSSの設定を追記しました。 基本的な使い方を書きました。 http://d.hatena.ne.jp/pospome/20130913/1379050713 dropzone.jsはAjaxを利用した非同期ファイルアップロードライブラリ。 http://www.dropzonejs.com デモを見るとかなりいい感じ。 アップロード中のプログレスバー表示などデザインもちゃんとしている。 jQueryに依存しないというのも環境によっては嬉しい。 ただ、dropzone.jsのデフォルトデザインを活かしたまま、ちょっと手を加えようとすると ハマってしまったのでメモ。 以下はdropzone.jsのデフォルトデザイン
Pluploadはオープンソースのファイルアップローダーで、jQueryを使用してファイルのアップロードやリサイズ処理を行う事が可能になっています。 アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。 作者はTinyMCEの開発者の方だそうです。これは期待できますね。 詳しくは以下 機能 各テクノロジーについて何ができるかは、表にまとめられています。HTML5はJavaScriptだけで画像のリサイズなんかもできちゃうんですね。 以下のような機能があるようです。 複数ファイルのアップロード アップロード進捗状況の表示 最大ファイルサイズの制限 画像のサイズを変更する ユニークなファイル名の指定 複数ファイルのアップロード処理はCMSでは必須なので、こういったライブラリがオープンソースで公開されるのは開発者には嬉しいですね。 ソースも
はじめに Webブラウザのドラッグ＆ドロップ領域にファイルを放り込めば、WordPressへ投稿できるような仕組みを作りたいと思い、とりあえず既存のライブラリを探すことにしました。 調べたところ、Drag＆Dropからアップロード処理まで行なってくれるDropzoneJSがよさそうでした。理由としては、対応するWebブラウザが多く、jsファイル１つで動作するところです。 drop時にprocessQueueメソッドを呼ぶと3回目にハングする DropzoneJSのサイトにある説明を見ながら、以下のようにざっくり書いてみました。 drop時に自動的にアップロードされないように、autoProcessQueue: falseとして、drop後にアップロードの確認を行うようにしました。 3回目でFirefoxがハングしました。流れは、1回目は失敗（何も起こらない）、2回目は成功、3回目でハングで
前回の説明で dropzone.js の使い方を説明した。 「ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする」 http://d.hatena.ne.jp/pospome/20130713/1373699451 これはプレビューフォームとドロップフォームを分けたんだけど、 今回は一緒にしたかったので、 ドロップフォームにプレビューさせる方法をメモ。 おそらくこれが基本的な使用方法になるはず。 【準備】 dropzone.js で使うのは、以下のファイル。 「download/dropzone.min.js」 「download/images/」の画像ファイル 「download/css/basic.css, dropzone.css」 これを任意のディレクトリに設置するが、 cssには画像ファイル
こんにちわ。 プログラマの湊です。 今回は、jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」をご紹介いたします。 今まで使用した中でも、抜群のカスタマイズ性があるのでオススメですよ☆ ダウンロード ソースコードはGithubに上がっております。 https://github.com/blueimp/jQuery-File-Upload デモページはこちらから 使い方 指定のJS,CSSファイルを下記のように読み込み、呼び出してあげるだけでOK。 僕の場合は、composerを利用し、アップデートを楽にしております。（composerについてはまた別の機会に） bootstrapにも対応しておりますので、簡単にスタイル設定されます。 jqueryベースですので、jqueryは読み込んであげて下さい。(コードはサンプルのものを抜粋しております。)
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery File Uploadの使い方