世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

AngularJSでファイルをアップロードしたい。画像の場合はアップロード前にプレビューもしたい（追記：さらにドラッグアンドドロップにも対応）。 私の書き方も悪いのでしょうけど、Angularだから特に楽ってことはないな。まあ、素直にng-file-upload使えばいいのだろうけど。 前提知識 <input type="file">のファイル（名）は標準ディレクティブでは取得できない。 FormDataを利用して、かつ、multipart/form-dataで送る。 つまり、カスタムディレクティブを定義する必要がある。 HTML（フロント） ソースは少々長いが、やっていることは至ってシンプル。要所はカスタムディレクティブのところ。 ディレクティブ名はキャメル形式が-とかに変わる（hogeFooはhoge-fooというディレクティブ名になる） DOMからscopeへの値の紐付けのタイミング

<input>の属性一覧 type属性以外もけっこうあります。半分以上がHTML5から加わった属性です。 type="部品の種類" 上記をご覧ください。 name="部品の名前（任意のテキスト）" 受け取る側が各部品を見分けるための名前なので、必ずつけておきましょう。 「部品の名前=データ内容」というカタチでセットで送信されます。 <input type="tel" name="telNumber"> <!--この例なら、「telNumber = 入力されたテキストデータ」で送信されます--> また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。 <input type="radio" name="repeat" value="はじめて">はじめて <input type="radio" name="repeat" value="2回目">2回目

あすで東日本大震災からまる4年ですね。当日の発災時刻には山形県山形市の JR 北山形駅というところに偶然いた kagata です。何もないときに旅行に訪れたいとかねがね思っているのですが、まだ実現できずにいます。 さて、今回は前回の続編です。配列の先頭要素の値をとってきたいなら array_shift() よりも current() のほうが処理速度が速い…ということを前回確かめました。ただ、どちらの方法もあまりきれいではないし、どんな場面にでも使えるというわけにはいかなさそうです。 ということで、配列の先頭要素の値を取得するできるだけきれいな方法をねちこく考えてみました。 おさらい 前回の記事では、配列の先頭要素の値を取得する方法を2つご紹介しました。さらに、読者の方からさらにもう1つの方法をご提案いただいています。 それぞれの方法について、簡単に振り返ります。 array_shift(

こんばんは、ゆあさです。 HTML5で追加されたFile APIを使うと、ユーザーが選択した画像ファイルをブラウザ上でプレビュー表示する機能を簡単に実装することができます。 そこでAngularJSを使ったアプリケーションで画像ファイルプレビュー機能の実装するサンプルを紹介したいと思います。 今回は外部のモジュールを使用せず必要最低限の機能のDirectiveとControllerを実装していきます。 Directiveの実装 まずはControllerのscopeからユーザーが選択したファイルを参照できるようにするためのDirectiveの実装です。 myApp.directive("fileModel", ["$parse", function ($parse) { return { restrict: "A", link: function (scope, element, attr

こんにちは。もやし炒めをたべています、きたけーです。 DOM要素からAngularJSのスコープのオブジェクトを得る術を知ったのでメモ。デバッグするときに捗りそう。こんなかんじの内容をコンソールで叩きます。 var el = document.getElementById('hoge'); angular.element(el).scope(); Chromeのデベロッパーツールで選択している要素の場合 $0に選択している要素のDOMオブジェクトが入っているので angular.element($0).scope(); 親スコープを辿りたいとき angular.element($0).scope().$parent; 便利

私たちNTTドコモ・ベンチャーズは、スタートアップの構想実行力とNTTグループの社会実装力、さらにそれぞれの想いを束ねることで、未来への推進力を生み出します。 そして、世界の景色を変えるインパクトを起こしていきます。 Our Vision 世界の景色を変える力と想いが、 世界中から集まるコーポレートベンチャーキャピタルへ。 NTTグループは、今まで、その技術力と社会実装力で、世界の景色を変えてきました。一方で、スタートアップは、その自由な構想力と技術や人による実行力で、変化の芽を生み出し続けています。 私たちNTTドコモ・ベンチャーズは、スタートアップの構想実行力とNTTグループの社会実装力をつなぎます。 私たちのつなぎかた、それはスタートアップとNTTグループ、それぞれの力と想いを束ねること。 それぞれの想いに寄り添いながら、そして私たちの想いも乗せ、束ねることで、未来への推進力を生み出

getElementById() は Document インターフェイスのメソッドで、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。 ID を持たない要素にアクセスする必要がある場合は、 querySelector() で何らかのセレクターを使用して要素を検索することができます。

対象読者 AngularJSを使っている開発者 JavaScriptのフレームワークの動向などに興味を持っている方 必要な環境 この記事では、AngularJSを使用し、Chrome（42.0）、IE11、Firefox（37.0）、Safari（8.0.4）の環境にて確認を行っています。 バージョン1.4では何がかわるのか バージョン1.4での大きな特徴として、以下の変更がある予定です。 新しいRouter機能（ngNewRouter） より柔軟なクッキー機能（$cookies） $parseや$compileのパフォーマンス改善 $httpサービスにおけるパラメータシリアライズ方式の柔軟性強化 ICU MessageFormatに対応したAngularJS式の利用 基本的には過去のソースコードが動かなくなるような変更はあまりなく、内部ハックをしているような開発者を除けば、既存のソースコ

アップロードしようとしたデータサイズが大きいと怒られているので上限値を上げます。 client_max_body_size を下記のように配置します。 http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { client_max_body_size 20M; listen 80; server_name localhost; # Main location location / { proxy_pass http://127.0.0.1:8000/; } } }

連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。

覚え書き程度にメモしています。 ASP/PHP/JS/HTML5/CSS3/Android/Objective-C/FLEX/VB/Javaなどなど FuelPHP PHPの新しいフレームワークということでちょっとだけ触ってみました。 。。。なんとか動いたんでメモ程度に。 まず、サイトからバージョン1.2 をダウンロード。 ダウンロードしたファイルを展開してそのままウェブサーバに配置。 （今回はhtdocs > fp-sampleとしました） とりあえずhttp://localhost/fp-sample/public/index.phpにアクセス。 「You don't have permission to access」と出たんで権限を与えます。 $ chmod 755 fp-sample 再度アクセスすると画面が表示されると思います。 はじめから動くサンプルとしてhttp://loc