Angularjs如何在上传图片后提交表单

时间:2015-12-15 15:16:48

标签: javascript angularjs image-uploading angular-controller

当我上传图片时,我试图提交来自控制器form

我不确定我该怎么做。

任何帮助将不胜感激!



(function(angular) {
      'use strict';
      angular.module('includeExample', ['ngAnimate'])
        .controller('ExampleController', ['$scope', '$q',
          function($scope, $q) {
                $scope.uploadStart = function(){
                  $("#test").html("upload started");
                };
          

          }
        ]);
    })(window.angular);

.image-upload > input
{
  display: none;
}

.image-upload img
{
  width: 80px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://institucional.portoseguro.com.br/visual/v.0.2/css/ps-lib.full-min.css" rel="stylesheet"/>
<div ng-app="includeExample" ng-controller="ExampleController" class="box-image ps-mod1 ps-lg-mod1">
    <div class="image-grouped image-upload"  >
		<form ng-submit="uploadStart()">
			<label for="file-input" >
   	    		  <span class="ps-ico ps-ico-xm ps-glyph ps-ico-camera"></span>
			</label>
		
		    <input id="file-input" type="file"/>
			<style type="text/css">
				.image-upload input
				{
				    display: none;
				}
				.image-upload label 
				{		    
				    cursor: pointer;
				}
			</style>
			<img alt="Brand" src="https://ec.europa.eu/digital-agenda/sites/digital-agenda/files/styles/square_thumbnail/public/default_images/user_default.png?itok=m56b0Aym">
		</div>
	</div>
    <label id="test"></label>
&#13;
&#13;
&#13;

0 个答案:

没有答案