0

I have found some scripts that help me at this process but I got some problems.

Script is like below:

var data = new FormData();
//item is file which is needed to upload
  data.append('file',item);
  data.append('param1',variable);
  $.ajax({
  xhr: function() {
    var xhr = $.ajaxSettings.xhr();
    if(xhr.upload){
        xhr.upload.addEventListener("progress", function(e) {
          if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            percentComplete = parseInt(percentComplete * 100);
            console.log(percentComplete);

          }
    }, false);
}
return xhr;
 },
url:url,
  type: "POST",
  data:data,
  processData: false,
  contentType: false,
  success: function() {

  },

});

My problem is when I begin to upload it reach 100% suddenly (percentComplete became 100%) ,doesn't work and at the result user need to wait without percentages.Why it is not working properly,how can I solve it?And I have seen that when I open developer tab and network bar,then if I switch another option than No throttling, it begins to work.But normally it doesn't work

Alex
  • 1
  • 2
  • What do mean by "it turn 100% suddenly"? Is `e.total` reached? – guest271314 Feb 10 '17 at 17:42
  • @guest271314 yeah, I upload 10mb file, it return 100% then I am waiting 30second then it finish upload – Alex Feb 10 '17 at 17:46
  • @guest271314 I have looked at this http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/#29109577 but it works same way,it begin from 100% then I wait for upload finish,same bug happened – Alex Feb 10 '17 at 18:11
  • @guest271314 I have only changed this `!!e.dataTransfer.files.length && image` to `true` so I will be able to upload video then I have tested and it just began from 100% – Alex Feb 10 '17 at 18:12
  • Cannot reproduce where `progress` element `.value` or `e.loaded` at `progress` event "began from 100%". Can you create a stacksnippets, or jsfiddle http://jsfiddle.net where `javascript` at linked Answer http://stackoverflow.com/a/29109577/ "began from 100%"? – guest271314 Feb 10 '17 at 18:16
  • @guest271314 I can show that in your jfiddle [link](http://jsfiddle.net/guest271314/0hm09yqo/) where I found http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/#29109577http://jsfiddle.net/guest271314/0hm09yqo/ .I have just changed line 117 to `if(true){` . Even when I upload 200mb video it begin from 100%.I am using current version of Google Crome – Alex Feb 10 '17 at 18:21
  • @guest271314 I have tested it on Edge browser, and there is same problem , even when I upload image , it begin from 100% so problem is not related with file format or browser – Alex Feb 10 '17 at 18:31
  • Have not tried Edge browser. Cannot reproduce `progress` element `.value` beginning at 100% at chromium using `javascript` at linked jsfiddle. – guest271314 Feb 10 '17 at 18:44
  • @guest271314 I have tested it on mobile browser ,it worked, but when I test it with cross domain, it doesn't work at all.How can I ,make this cross domain? – Alex Feb 10 '17 at 18:57
  • What do you mean by "cross domain"? – guest271314 Feb 10 '17 at 19:06
  • @guest271314 I am writing API which allow developers to upload their website's images to their API account.So I need cross-domain support,so developers can upload image from their server to my server.I have tested it cross domain on mobile it doesn't work even doesn't send request and stop. – Alex Feb 10 '17 at 19:11
  • _"I need cross-domain support,so developers can upload image from their server to my server."_ How is this related to uploading files with progress? Does your server respond with CORS headers? – guest271314 Feb 10 '17 at 19:15
  • Yes my my server response with CORS header which is only this :` header("Access-Control-Allow-Origin: *");`.And also I use jsonp datatype – Alex Feb 10 '17 at 19:23
  • How is this related to `progress` event `e.loaded` or `progress` element `.value` beginning at 100%? – guest271314 Feb 10 '17 at 19:24
  • @guest271314 It is related, I have found real issue why suddenly progress 100% happened, reason is cross domain when cross domain failed it begin to fail and make itself 100%.So to solve this problem , we need to solve cross domain problem but I have tried CORS with header,and jsonp both doesn't work – Alex Feb 10 '17 at 19:29
  • Can you reproduce issue at jsfiddle http://jsfiddle.net or plnkr http://plnkr.co? – guest271314 Feb 10 '17 at 19:31
  • here is the example ,you can check console and you will see header error even I include `header("Access-Control-Allow-Origin: *");` to the top of page http://www.newtimebox.com/demos/OOS_engine_API/upload.php – Alex Feb 10 '17 at 19:41
  • Can you include `uploader.js` at Question. Again, the approach at linked Answer resolves current Question. – guest271314 Feb 10 '17 at 19:48
  • @guest271314 but it contains a lot of unrelated code,can I include only Ajax part? – Alex Feb 10 '17 at 20:01
  • @guest271314 I have seen that browsers says there are 2 header which named `header("Access-Control-Allow-Origin: *");` and `header("Access-Control-Allow-Origin: http://mywebsite.com");` but I only wrote one which is * .I don't know how can I remove `header("Access-Control-Allow-Origin: http://mywebsite.com");` so there will be one.I have tried `header_remove ` but it didn't work – Alex Feb 10 '17 at 20:24
  • @guest271314 when I make this request from localhost it works,maybe problem is related with sub domain request – Alex Feb 10 '17 at 20:28
  • See http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – guest271314 Feb 10 '17 at 23:50

0 Answers0