javascript - Using AJAX and a remote PHP to upload files -

i'm trying build uploader using ajax. want use ajax rather form , iframe want default css styles in play response.

the issue is, php on remote server. i'm using shopify , don't allow me use server php, have on different server. reason, it's not working. here code:

<form action="" id="formcontent" method="post" enctype="multipart/form-data" > <input  type="file" name="file"  required id="upload"> <button class="submiti" >upload image</button>  </form>   <script type="text/javascript"> $("#formcontent").submit(function(e){     e.preventdefault();  var formdata = new formdata(this);      $.ajax({       url: "http://myserver.com/upload.php",         type: "post",         data: formdata,         mimetypes:"multipart/form-data",         contenttype: false,         cache: false,         processdata: false,         crossdomain: true,         success: function(){             alert("file submitted");         },         error: function(){             alert("okey");         }      });   }); 

all i'm getting error message. following code outlined in response: https://stackoverflow.com/a/38450277/6442152

i tried using code using xmlhttprequest:

$(':file').change(function(){ var file = this.files[0]; name = file.name; size = file.size; type = file.type;  if(file.name.length < 1) { } else if(file.size > 100000) {     alert("the file big"); } else {      $(':submit').click(function(){         var formdata = new formdata($('*formid*')[0]);         $.ajax({             url: 'script',  //server script process data             type: 'post',             xhr: function() {  // custom xhr                 myxhr = $.ajaxsettings.xhr();                 if(myxhr.upload){ // if upload property exists                     myxhr.upload.addeventlistener('progress', progresshandlingfunction, false); // progressbar                 }                 return myxhr;             },             // ajax events             success: completehandler = function(data) {                 /*                 * workaround chrome browser // delete fake path                 */                 if(navigator.useragent.indexof('chrome')) {                     var catchfile = $(":file").val().replace(/c:\\fakepath\\/i, '');                 }                 else {                     var catchfile = $(":file").val();                 }                 var writefile = $(":file");                 writefile.html(writer(catchfile));                 $("*setidofimageinhiddeninput*").val(data.logo_id);             },             error: errorhandler = function() {                 alert("something went wrong!");             },             // form data             data: formdata,             // options tell jquery not process data or worry content-type             cache: false,             crossdomain: true,             contenttype: false,             processdata: false         }, 'json');     }); }}); 

this got me error message , said 404 file not found

i added header php , doesn't work:

header('access-control-allow-origin: *'); header('access-control-allow-methods: post'); header('access-control-max-age: 1000');