質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

2770閲覧

AngularJSで複数ファイルアップロード

mao999

総合スコア111

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2016/11/08 12:19

AngularJS 1.4.1を使って、WEBサイトを作っています。

###実現したいこと
複数ファイルをsocket.ioを使ってアップロードすることを考えています。

・追加/削除ボタンを押すと、ファイル選択の部品の数を増減させる。
・選択後、プレビューを表示させる。
・送信する部分は現在未実装。

###問題
・選択後にプレビューが表示されない。

$scope.$watchの使い方がイマイチな気がしています。

###コード抜粋

html

1<div class="uploadfile-list" ng-repeat="uploadfile in main.info.uploadfile_data track by $index"> 2 <div class="uploadfile-elem"> 3 <img ng-if="main.info.uploadfile_data[$index]" ng-src="{{main.info.uploadfile_url[$index]}}" 4 width="150" height="150"><br> 5 <input type="file" file-model="uploadfile"><br> 6 <button class="btn pull-left btn-default" ng-if="!$last" ng-click="main.onclick_del_file($index)">削除</button> 7 <button class="btn pull-left btn-default" ng-if="!$first && $last" ng-click="main.onclick_del_file($index)">削除</button> 8 <button class="btn pull-left btn-default" ng-if="$last" ng-click="main.onclick_add_file($index)">追加</button> 9 </div> 10</div>

javascript

1 main.info = { 2 uploadfile_data: [""], 3 uploadfile_url : [""] 4 }; 5 main.onclick_add_file = function(idx){ 6 main.info.uploadfile_data[idx+1] = ""; 7 main.info.uploadfile_url[idx+1] = ""; 8 }; 9 main.onclick_del_file = function(idx){ 10 main.info.uploadfile_data.splice(idx,1); 11 main.info.uploadfile_url.splice(idx,1); 12 }; 13 $scope.$watch(function(){ 14 return main.info.uploadfile_data 15 },function(filedata){ 16 trace(JSON.stringify(filedata)); 17 if(!filedata || filedata.type == null || !filedata.type.match("image.*")){ 18 return; 19 } 20 var reader = new FileReader(); 21 reader.onload = function(){ 22 $scope.$apply(function(){ 23 var idx = main.info.uploadfile_data.indexOf(filedata); 24 if(idx != -1){ 25 main.info.uploadfile_url[idx] = reader.result; 26 } 27 }); 28 }; 29 reader.readAsDataURL(filedata); 30 }, 31 true); 32 }]) 33 .directive('fileModel',['$parse',function($parse){ 34 return { 35 restrict: 'A', 36 link: function(scope,element,attrs){ 37 var model = $parse(attrs.fileModel); 38 element.bind('change',function(){ 39 scope.$apply(function(){ 40 model.assign(scope,element[0].files[0]); 41 }); 42 }); 43 } 44 }; 45 }])

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自前でするのを諦めて、ng-file-uploadを使うことにしました。

投稿2016/11/08 17:05

mao999

総合スコア111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問