NG 스타일은 충분히 빨리

Question

나는 겨 스타일을 할 수있는 좋은 폭을 보내고, 크롬 개발 도구와 디버깅 후이 진행 표시 줄

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded()/file.size * 100) + '%'}"></div> 
</div> 

있습니다. 실행 (소스 코드에서 F8 사용)을 중지하면 스타일이 좋은 너비로 업데이트됩니다. 실행을 멈추지 않으면 막대가 천천히 1 %로 천천히 내려 가고 업로드가 100 %에 도달하면 바는 1에서 100 %로 이동합니다.

ng-flow을 사용하여 하나의 전체 파일이 아닌 청크로 파일을 업로드합니다.

여기에 일부 이미지 동작 표시하려면이 충분히 빠르게 스타일을 업데이트하지 않습니다
첫 번째 이미지 쇼 (0 %에서 막대가 작은 파란색 막대가 표시되지 않습니다) 이 때 일어나는 무엇인가를 파일이 완전히 업로드되었습니다 개발자 도구 소스 코드 (디버깅)에서 F8 키를 누르면 스타일이 올바르게 업데이트됩니다.

업로드 진행률 표시 줄이있는 link to a working example입니다.

ng 스타일의 file.progress()를 사용해 보았지만 같은 동작을합니다. 디버거가 없으면 업로드 된 크기가 제대로 변경되지 않고 실제로 업데이트되는 것처럼 보이지 않습니다.

편집 : 파일로드가 100 %에 도달하면 바로드가 약간 더 빨라지고 Firefox에서는 약 5-10 %까지 테스트됩니다.

편집 2 :

여기

sizeUploaded: function() { 
    var size = 0; 
    each(this.files, function (file) { 
    size += file.sizeUploaded(); 
    }); 
    return size; 
} 

html로 ...

<div flow-init flow-name="flow" class="span5 clearfix"> 
    <div class="alert" flow-drop> 
     Drag And Drop your file(s) here 
    </div> 

    <span class="btn" flow-btn><i class="icon icon-file"></i> Upload File</span> 

    <div ng-repeat="file in flow.files"> 
     {{file.name}} ({{file.size}} kB) 
     <br /> 
     IS COMPLETE: {{file.isComplete()}} 
     <br /> 
     ERROR: {{file.error}} 
     <br /> 
     SIZE UPLOADED: {{file.sizeUploaded()}} kB 
     <br /> 
     IS UPLOADING: {{file.isUploading()}} 
     <br /> 
     {{file.sizeUploaded()}} kB/{{file.size}} kB | {{file.sizeUploaded()/file.size * 100 | number:0}}% 
     <div class="progress active progress-striped" ng-class"{active: file.isUploading()}"> 
      <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded()/file.size * 100) + '%'}">{{file.sizeUploaded()}}/{{file.size}} kB | {{file.sizeUploaded()/file.size * 100 | number:0}}%</div> 
     </div> 
     <input type="button" ng-click="file.resume()" value="Start/Resume" /> 
     <input type="button" ng-click="file.pause()" value="Pause"/> 
    </div> 


    <table> 
     <tr ng-repeat="file in flow.files"> 
      <td>{{$index+1}} | </td> 
      <td>{{file.name}}</td> 
     </tr> 
    </table> 
</div> 

추가 참고 : 나는 당신의 코드 나 바이올린을 보지 않고 각도 1.1.5

Answer 1

를 사용하고 그 몇 가지 가능성에 대해서만 생각할 수있는 문제를 보여줍니다.

Angular는 모델 값이 바뀌면 당신의 견해를 먹었습니다. 그래서 당신이 할 수있는 것은 모델 속성을 만들 것입니다,

$scope.uploadProgress 

말과 업로드 당신은 그것의 실행을 중지 완료되면 다음을 업데이트 할 (각도 1.2 또는 $interval) $timeout를 사용합니다. 당신이, 당신이 그에게보기를 주기적으로 업데이트 속성을 바인딩 한 후 다음

:

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="{'width' : uploadProgress + '%'}"></div> 
</div> 

나는 문제가 각도가 (file.sizeUploaded()/file.size * 100)의 변화를 평가되지 않는 것입니다 생각, 적어도 내가 기분이 안 그렇게하면 속성을 업데이트해야하고 각도는이를 소화해야합니다.

이것이 작동하지 않으면 내 대답을 업데이트 할 수있는 방법을 알려주세요.

또한, 당신은 그 값으로 DIV 바인딩 속성을보고하고 그 값을 반환하는 함수를 만드는 시도 할 수 :

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="barStyle()"></div> 
</div> 

:

//this object has all the info about the upload 
$scope.uploadObject = { 
    uploadedProgress: 0 
} 

$scope.barStyle = function() { 
     return { 
      width: $scope.uploadObject.uploadedProgress + '%', 
      color: "#FFF" //Any property you may want to add 
     }; 
}; 

$scope.$watch("uploadObject", $scope.barStyle); 

그런 다음이 변경 사항을 반영하도록보기를 업데이트를

Answer 2

문제는 나와 내 친구들이 이미지 업로드를 통해 잠시 동안 가지고 있었던 문제 일 수 있다고 생각합니다. 문제는 클라이언트가 전체 업로드 이벤트의 처음 1 %를 파일이 클라이언트를 떠나 서버 측에 도착하는 데 걸리는 시간으로 추적한다는 것입니다.

나머지 99 %는 서버 측에서 상기 파일을 실제 처리하여이를 클라이언트에 반환하는 것입니다. 서버가 클라이언트에게 진행 상황을 표시하지 않았기 때문에 (우리가 제대로 진행 상황을 추적 할 수있을 때), 우리는 꽤 오랫동안 1 %에서 머물렀다가 즉시 100 %로 파일을 점프했습니다 고객에게 돌아왔다.

우리가 수정 한 방법은 백그라운드 작업에서 서버 측에 이미지 처리를 넣는 것입니다. 현재 업로드 된 크기 (귀하의 경우 file.sizeUploaded())의 요인을 100으로 간단하게 듭니다. 이로 인해 유체 진행률 막대 이벤트의 첫 부분은 일상적으로 흥미로운 이벤트입니다.

나머지 프로세스는 백그라운드 작업으로 이동 한 다음 사용자에게 이미지를 표시 할 수 있도록 다양한 HTML5 Data API를 통해 업로드 된 파일의 로컬 복사본을 유지합니다. 이 방법으로 우리는 어떤 의미에서 서버에서 이벤트를 분리하고 우리의 즐거운 사업을 시작할 수 있습니다.

이제 모든 것이 좋지만 좋습니다. 그러나 이것이 어떤 방식 으로든 영향을 주는지 확신 할 수 없습니다. XHR2 Progress Events만으로도 서버 측면을 추적하지 않기 때문에 flow.js가 이미 기본적으로이 작업을 수행하고 있는지 확실하지 않습니다. 따라서 flow.js와 같은 라이브러리를 빌드하고 이벤트를 발생시키는 서버에 의존 할 방법이 없기 때문에 라이브러리가 이미 이것을 수행하는 것은 당연합니다. (물론 제가 방법이 있다고 가정합니다).

어떤 경우라도 요인을 100 배로 높여서 어떤 결과를 얻을 수 있습니까? 나는 결과가 무엇 일지에 관해 궁금하다. 그리고 우리가 실제로 같은 보트에 앉아 있다면.

행운을 빌어 요 :)

Answer 3

로컬이를 테스트하는 경우, 다음 업로드 초 미만이 소요됩니다. Flow.js에 progressCallbacksInterval이라는 구성 매개 변수가 있습니다. 이것을 높게 설정하면 진행 상황을 볼 수 없습니다. 이것을 0으로 설정하면 모든 진행 상황보기에서 업데이트된다는 것을 의미합니다.

비율을 설정할 때 다음과 같이이 file.progress를 사용해야합니다

Answer 4

가 :

가 시작하고 마지막에 업데이트 또는 디버그 휴식 시간 동안된다는 사실은/일시 정지 보인다