title: html FileReader : convert blob to image file?
body: <p>client side code <br></p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
  var reader = new FileReader(); 
  var objVal;
  var image = new Image();
  reader.onload = function(e) {
      document.getElementById('propertyImg').setAttribute('src', e.target.result);
  };
  
  function readURL(input){    
      if(input.files &amp;&amp; input.files[0]){
          reader.readAsDataURL(input.files[0]);
      }
      else {
          document.images[0].src = input.value || "No file selected";
      }
  }
  
  function sendPost(){
              var url = 'http://myurl.com';
              var name = document.getElementById('fileInput').files[0].name;
      var data = document.getElementById('propertyImg').getAttribute('src');
      var f = document.createElement("form"); 
      var imgName = document.createElement("input"); 
      var imgData = document.createElement("input"); 
      var f_attr = { 'method' : 'post' , 'action' : url};
      var imgName_attr = {"type" : "hidden", "name" : "img_name", "value" : name};
      var imgData_attr = {"type" : "hidden", "name" : "data", "value" : data};
      setAttributes(f, f_attr);
      setAttributes(imgName, imgName_attr);
      setAttributes(imgData, imgData_attr);
      f.appendChild(imgName);
      f.appendChild(imgData);
      document.body.appendChild(f); 
      f.submit(); 
  }
  
  function setAttributes(el, attrs) {
      for(var key in attrs) {
          el.setAttribute(key, attrs[key]);
      }
  }
  &lt;/script&gt;
  &lt;body&gt;
     &lt;img id="propertyImg" src="./img/sprite.png"&gt;&lt;/img&gt;  
     &lt;input type='file' id='fileInput'class='width70_prop' onchange="readURL(this);"&gt;&lt;/input&gt;
     &lt;button onclick="sendPost()"&gt;sendPost&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>serverside code </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;?
            $FileName = $_POST['img_name']; 
            $data = $_POST['data']; 
            list($header, $content) = split('[,]', $data); 
            file_put_contents($FileName, base64_decode($content));
            print "Data Written"; 
       ?&gt;
      &lt;script&gt;
      function showImg(){
      var imgSrc =  "&lt;?=$data?&gt;";
      var imgDiv = document.getElementById('imgDiv');
      imgDiv.src = imgSrc;
      }
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;img id='imgDiv'&gt;&lt;/img&gt;
      &lt;button onclick="showImg()"&gt;show&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the blob sent to server had infomation about header and its content. 
  when I split header then save decoded its content, it worked.... 
  I changed above code which now works. thx guys </p>