clear/reset xmlhttprequest and form data[Answered] RSS

• • Reply
  dow7

  Member

  574 Points

  652 Posts

  clear/reset xmlhttprequest and form data

  Jan 31, 2014 06:48 PM|dow7|LINK

  Hi,

  i use XMLHttpRequest to upload files. Below is all the code i use to upload from a modal window. 

  <span><a href="#" id="modchart-d">Insert chart</a></span>
  
  <script type="text/javascript">
      $(document).ready(function ()
      {
  
  // modal charts //
  (function (hpeduinvest, $, undefined) {
  
      $(function () {
          $('#modchart-d').bind('click', function () {
              $('#chart-d').css({
                  'min-height': '500px',
                  'left': '0px',
                  'right': '0px',
                  'top': '0px',
                  'margin-left': 'auto',
                  'margin-right': 'auto',
                  'display': 'block'
              }).show();
          });
      });
  }(window.hpeduinvest = window.hpeduinvest || {}, jQuery));
  // end modal charts //
  
      // upload file
  
      function fileSelected()
      {
          var file = document.getElementById('fileToUpload').files[0];
          if (file && file.type == "image/png")
          {
              var fileSize = 0;
              if (file.size > 1024 * 1024)
                  fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
              else
                  fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
              document.getElementById('message').innerHTML = 'File name: ' + file.name + '<br>' + 'File size: ' + fileSize;
          }
          else
          {
              document.getElementById('message').innerHTML = "Please select .png files";
          }
      }
  
      function uploadFile()
      {
          var file = document.getElementById('fileToUpload').files[0];
          if (file && file.type == "image/png")
          {
              var fd = new FormData();
              fd.append("fileToUpload", file);
              var xhr = new XMLHttpRequest();
              xhr.upload.addEventListener("progress", uploadProgress, false);
              xhr.addEventListener("load", uploadComplete, false);
              xhr.addEventListener("error", uploadFailed, false);
              xhr.addEventListener("abort", uploadCanceled, false);
              xhr.open("POST", "/pages/ajax/upload");
              xhr.send(fd);
          }
      }
  
      function uploadProgress(evt)
      {
          if (evt.lengthComputable)
          {
              var percentComplete = Math.round(evt.loaded * 100 / evt.total);
              document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
              document.getElementById('progressn').value = percentComplete;
          }
          else
          {
              document.getElementById('progressNumber').innerHTML = 'unable to compute';
          }
      }
  
      function uploadComplete(evt)
      {
  
          $('#updata')[0].reset();
          $('#insertchart').show();
          $('#insertchart').click(function ()
          {
              var txt = $('#Content').val();
              var cur_pos = $('#Content').getCursorPosition();
              var htmlString = '<img src=\"/charts/' + evt.target.responseText.replace(/\r?\n|\r/g, "") + '\" alt="Chart">';
              if (cur_pos != 0)
              {
                  $('#Content').val(txt.substring(0, cur_pos) + " " + htmlString + " " + txt.substring(cur_pos));
              }
              else
              {
                  $('#Content').val(htmlString + " " + txt);
              }
              $('#chartname').val(evt.target.responseText.replace(/\r?\n|\r/g, ""));
              return false;
          });
      }
  
      function uploadFailed(evt)
      {
          alert("There was an error attempting to upload the file.");
      }
      function uploadCanceled(evt)
      {
          alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
  </script>
  
  <div id="chart-d">
          
          Upload chart 
          <form enctype="multipart/form-data" method="post" action="" id="updata">
              <input type="file" id="fileToUpload" accept="image/png" onchange="fileSelected();">
              <a href="#" onclick="uploadFile()">Confirm upload</a>
          </form>
  
          <span id="progressNumber"></span>
          <progress id="progressn" max="100" value="0"></progress> 
  
          <div id="message"></div>
      
     
          <a href="#" id="insertchart" onclick="$('#chart-d').hide();" style="display: none">Insert chart</a>
  
          <a href="#" onclick="$('#chart-d').hide();">Exit</a>
      </div>
  

  I'm looking for a function to reset or clear the entire data (reset XMLHttpRequest) or open the new window as the page was first loaded if this links are clicked:

  <a href="#" id="insertchart" onclick="$('#chart-d').hide();" style="display: none">Insert chart</a> 
  <a href="#" onclick="$('#chart-d').hide();">Exit</a>

• • Reply
  Happy Chen -...

  All-Star

  15648 Points

  2151 Posts

  Re: clear/reset xmlhttprequest and form data

  Feb 04, 2014 06:18 AM|Happy Chen - MSFT|LINK

  hi,

  I would suggest you refer to the links below for details:

  An XMLHTTPRequest tip

  http://blogs.msdn.com/b/ie/archive/2006/06/08/619507.aspx

  .ajaxStop()

  http://api.jquery.com/ajaxstop/

  Hope they can help you.

  We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!