CODEWITHSUNDEEP
javascriptjqueryajaxpostform-data
Mohit Kumar Gupta
Mohit Kumar Gupta

Reputation: 362

How to send Post request in IE 10?

How to send Post request with FormData() in IE 10.0.9200 ?

Html Code: 

<form id="myform" enctype="multipart/form-data" method="post">
    <input id="fileInput" type="file" name="avatar" style="width:100px; height:30px"/>  
    <div class="hr hr-12 dotted"></div>
    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
    <button type="reset" class="btn btn-sm">Reset</button>
</form>

Javascript Code: Send Form Data for image upload and after submit post a image to server, please help me for how to handle formdata() and post request for IE 10.0.9200.

var fd = new FormData($form.get(0));

deferred = $.ajax({
            url: submit_url,
            type: $form.attr('method'),
            processData: false,
            contentType: false,
            dataType: 'json',
            data: fd,
            xhr: function() {
                var req = $.ajaxSettings.xhr();
                if (req && req.upload) {
                    req.upload.addEventListener('progress', function(e) {
                        if(e.lengthComputable) {    
                            var done = e.loaded || e.position, total = e.total || e.totalSize;
                            var percent = parseInt((done/total)*100) + '%';
                            //percentage of uploaded file
                        }
                    }, false);
                }
                return req;
            },
            beforeSend : function() {
            },
            success : function() {

            }
        })

Upvotes: 1

Views: 2158

Answers (1)

Mohit Kumar Gupta
Mohit Kumar Gupta

Reputation: 362

Copied from https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Sending files using a FormData object

You can also send files using FormData. Simply include an element of type file in your :

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Then you can send it using code like the following:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

You can also append a File or Blob directly to the FormData object, like this:

data.append("myfile", myBlob, "filename.txt");

Upvotes: 1

Related Questions