Javascript XMLHTTPRequest file/image upload

Using javascript and XMLHTTPRequest to upload file/image.

<div id="drop_zone" style=>Drop files here</div>
<output id="list"></output>
<script>
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
	// XHR for Chrome/Firefox/Opera/Safari.
	xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
	// XDomainRequest for IE.
	xhr = new XDomainRequest();
	xhr.open(method, url);
  } else {
	// CORS not supported.
	xhr = null;
  }
  return xhr;
}

function test()
{
	var url = YOUR_IMAGE_URL;
	var xhr = createCORSRequest('PUT', url);
	xhr.setRequestHeader('X-Custom-Header', 'value');
	xhr.send();
}


  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
              
      var reader = new FileReader();
      var reader2 = new FileReader();
      
      reader.onload = (function(theFile) {
         return function(e) {
           // Render thumbnail.
           var span = document.createElement('span');
           span.innerHTML = "<img style=\"width:400px;\" src=\"data:image/jpeg;base64" + e.target.result + "\" />";
         };
      })(f);
      
      reader2.onload = (function(theFile) {
         return function(e){
           file_body = e.target.result;
           file_blob = new Blob([file_body], { type: "image/jpeg"});
           
           var method = "POST",
            url = YOUR_URL;,
            handler = function(event) { alert(event.text) },
            success_handler = function(event) { 
               
               /* update user */
               var method = "POST",
                  url = YOUR_URL,
                  auth_token = JSON.parse(event.text).response.auth_session.token,
                  data = {
                     picture: file_blob,
                     x_oauth_token: auth_token
                  }

               oauth.request({
                  success: handler,
                  failurea: handler,
                  url: url,
                  method: method,
                  data: data
               })
            },
            data = {
               //YOUR DATA SECTION
            }

         oauth.request({
            success: success_handler,
            failure: handler,
            url: url,
            method: method,
            data: data
         })
         };
      })(f);
      
      reader.readAsDataURL(f);
      
      reader2.readAsDataURL(f);
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the drag and drop listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料