使用指令上传AngularJS文件

时间:2015-10-22 14:18:52

标签: angularjs

我使用angularJS指令来获取要上传的文件,我使用这样的指令:

  public void showActionButtons() {
    ObjectAnimator a1 = (ObjectAnimator) AnimatorInflater.loadAnimator(getContext(), R.animator.fragment_floating_action_button_fade_in);
    ObjectAnimator a2 = a1.clone();
    ObjectAnimator a3 = a1.clone();

    FloatingActionButtonAdapter adapter = new FloatingActionButtonAdapter();

    a1.addListener(adapter);
    a2.addListener(adapter);
    a3.addListener(adapter);

    a1.setTarget(m_proximityFloatingActionButton);
    a2.setTarget(m_geofenceFloatingActionButton);
    a3.setTarget(m_locationFloatingActionButton);

    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playSequentially(a1, a2, a3);

    animatorSet.start();
  }

  private class FloatingActionButtonAdapter extends AnimatorListenerAdapter {
    @Override
    public void onAnimationStart(Animator animation) {
      ((View)((ObjectAnimator) animation).getTarget()).setVisibility(View.VISIBLE);
    }
  }

该指令如下所示:

<input type="file" file-model="myFile"> 

在控制器中:

myApp.directive('fileModel', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function(){
                    scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                    });
                });
            }
        };
    }]);


myApp.service('fileUploadService', ['$http', function ($http) {
        this.uploadFileToUrl = function(file, uploadUrl) {
            var fd = new FormData();
            fd.append('file', file);
            $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            })
            .success(function(){
                console.log('file upload successful');
            })
            .error(function() {
                console.log('file upload error');
            });
        }
    }]);

上传工作正常。关于这次上传的改进,我有两个问题:

  1. 如何上传多个文件 - 是否可以使用此指令上传多个文件

  2. 如果文件已上传 - 如何

1 个答案:

答案 0 :(得分:0)

  
      
  1. 如何上传多个文件 - 是否可以使用此指令上传多个文件
  2.   

您必须在输入字段中设置multiple才能选择多个文件。然后,您的文件变量将是一个包含多个文件的数组(如果选择了多个文件),而不仅仅是File个对象。

  
      
  1. 如果文件已上传 - 如何
  2.   

......?