deepdevelop
diff --git a/‎demo/application.js
+11-5 b/‎demo/application.js
+11-5
diff --git a/‎demo/index.html
+4-2 b/‎demo/index.html
+4-2
diff --git a/‎dist/deep_uploader.js
+17-1 b/‎dist/deep_uploader.js
+17-1
diff --git a/‎dist/deep_uploader.min.js
+1-1 b/‎dist/deep_uploader.min.js
+1-1
@@ -10,22 +10,28 @@ $(function() {
 
   $(document).on('click', '.test', DeepUploader.browseHandler);
 
-  $(document).on('FileAdded', '.test1', function(event) {
-    console.log('test1', event.originalEvent.detail);
+  $(document).on('FileAdded', '.test', function(event) {
+    console.log('.test added', event.originalEvent.detail);
   });
 
-  $(document).on('FileAdded', '.test', function(event) {
-    console.log('.test', event.originalEvent.detail);
+  $(document).on('FileProgress', '.test', function(event) {
+    var percent = parseInt(event.originalEvent.detail.percent * 100);
+    var percentText = '' + percent + '% completed';
+    $('.test-progress').val(percent);
+    $('.test-progress-text').html(percentText);
   });
 
   $(document).on('FileUploaded', '.test', function(event) {
-    console.log('.test', event.originalEvent.detail);
+    console.log('.test uploaded', event.originalEvent.detail);
+    $('.test-progress').val(0);
+    $('.test-progress-text').html('');
 
     var $image = $('<img />');
     $image.attr('src', event.originalEvent.detail.response.url);
     $image.appendTo('body');
   });
 
+
   $(document).on('FileAdded', function(event) {
     console.log('document', event.originalEvent.detail);
   });
 
@@ -5,8 +5,10 @@
   <title>Document</title>
 </head>
 <body>
-  <button class="test" data-uploader-profile="image">触发上传</button>
-  <button class="test1">触发上传</button>
+  <button class="test" data-uploader-profile="image">Upload a file</button>
+  <progress min="0" max="100" value="0" class="test-progress">0% complete</progress>
+  <span class="test-progress-text"></span>
+  <hr>
   <script src="jquery.min.js"></script>
   <script src="../dist/deep_uploader.js"></script>
   <script src="application.js"></script>
 
@@ -218,6 +218,20 @@ var BaseUploader = (function () {
           self.onFileError(self.xhr.status, self.xhr.responseText);
         }
       };
+
+      self.xhr.upload.onprogress = function (event) {
+        if (event.lengthComputable) {
+          var percent = event.loaded / event.total;
+          var percentText = percent;
+
+          self.onFileProgress(function () {
+            var detail = self._detail();
+            detail.percent = percent;
+
+            _event_trigger2['default'].trigger(self.element, 'FileProgress', detail);
+          });
+        }
+      };
       self.xhr.send(self.formData);
 
       callback();
@@ -227,7 +241,9 @@ var BaseUploader = (function () {
     value: function cancel() {}
   }, {
     key: 'onFileProgress',
-    value: function onFileProgress() {}
+    value: function onFileProgress(callback) {
+      callback();
+    }
   }, {
     key: 'onFileUploaded',
     value: function onFileUploaded(data, callback) {