JQUERY /文件上傳的角當量/多形式

Question

我在多形式的簡單的文件上傳：

我想做的事就是這樣，它看起來像這樣定義它：

雖然我的第一個解決方案工作正常 - 下面是我的代碼：

HTML片段

  <div> 
       <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" /> 
      </div> 

控制器片段：

$scope.uploadFile = function(files) { 
    var fd = new FormData(); 
    console.log('test', files[0]); 
    //Take the first selected file 
    fd.append("file", files[0]); 

    $http.post(uploadUrl, fd, { 
     withCredentials: true, 
     headers: { 
      'Content-Type': undefined 
     }, 
     transformRequest: angular.identity 
    }).success('...all right!...').error('..damn!...'); 

}; 

我定製的很少控制它看起來像第二個例子。

我曾想過創建按鈕第一seperately，然後使用jQuery的文件名存儲到這樣一個輸入框：

$（「輸入框」）HTML（文件名）;

但我不確定如何在角度上做到這一點，或者如果這是解決問題的正確方法。有任何想法嗎？由於

Answer 1

下面是你如何解決這個問題：

1）創建一個指令，它取得文件的輸入值，並替換輸入框中的值。在AngularJS中，DOM元素只能以這種方式操作。

//directive to add input file name in image upload 
app.directive('imageupload', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      $(element).change(function() { 
       // on change update upload file 
        $("#uploadFile").val($(element).val()); 
      }); 
     } 
    }; 
}); 

2）HTML鑑於

  <input id="uploadFile" placeholder="Choose File" disabled="disabled" /> 
      <div class="fileUpload btn btn-primary"> 
       <span>Upload</span> 
       <input id="uploadBtn" imageupload type="file" onchange="angular.element(this).scope().uploadFile(this.files)" class="upload" /> 
      </div> 
     </div> 
    </div> 

3）CSS

/* upload */ 

.fileUpload { 
    position: relative; 
    overflow: hidden; 
    margin: 10px; 
} 
.fileUpload input.upload { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 20px; 
    cursor: pointer; 
    opacity: 0; 
    filter: alpha(opacity=0); 
}