title: create file upload that work in IE
body: <p>I want to write a file upload script that works in IE but the two types of code that I'm writing have problems in IE.</p>
  
  <p>Please help. How can you write a file upload script that works in IE?</p>
  
  <p><strong>Type 1</strong><br>
  Problem Not Support File Api In IE (Is the trick not to use it?)</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/jquery-1.6.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          function updateSize() {
              var nBytes = 0;
              var nFiles=0;
              oFiles = document.getElementById("uploadInput").files;
              nFiles = oFiles.length;
              for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
                  nBytes += oFiles[nFileId].size;
              }
              var sOutput = nBytes + " bytes";
              // optional code for multiples approximation
              for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
                  sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
              }
              document.getElementById("fileNum").innerHTML = nFiles;
              document.getElementById("fileSize").innerHTML = sOutput;
          }
          // end of optional code
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple /&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Type 2</strong><br>
  Problem Not Support document.getElementById('fileToUpload')<strong>.files[0]</strong>(Is the trick not to Get Files[0]?)</p>
  
  <pre><code> &lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          function fileSelected() {
              var file = document.getElementById('fileToUpload').files[0];
              if (file) {
                  var fileSize = 0;
                  if (file.size &gt; 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('fileName').innerHTML = 'Name: ' + file.name;
                  document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
                  document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
              }
          }
  
          function uploadFile() {
              var fd = new FormData();
              fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
              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);
              $.post("UploadHandler.ashx");
              //xhr.open("POST", "UploadHandler.ashx");
              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('prog').value = percentComplete;
              }
              else {
                  document.getElementById('progressNumber').innerHTML = 'unable to compute';
              }
          }
  
          function uploadComplete(evt) {
              /* This event is raised when the server send back a response */
              alert(evt.target.responseText);
          }
  
          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.");
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1"&gt;
      &lt;div&gt;
          &lt;label for="fileToUpload"&gt;
              Select a File to Upload&lt;/label&gt;
          &lt;input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();" /&gt;
      &lt;/div&gt;
      &lt;div id="fileName"&gt;
      &lt;/div&gt;
      &lt;div id="fileSize"&gt;
      &lt;/div&gt;
      &lt;div id="fileType"&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="button" onclick="uploadFile()" value="Upload" /&gt;
      &lt;/div&gt;
      &lt;div id="progressNumber"&gt;
      &lt;/div&gt;
      &lt;progress id="prog" value="0" max="100.0"&gt;&lt;/progress&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Please Help :(</p>