2012-10-23 95 views
0

客戶端代碼
html FileReader:將blob轉換爲圖像文件?

<head> 
<script> 
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 && 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]); 
    } 
} 
</script> 
<body> 
    <img id="propertyImg" src="./img/sprite.png"></img> 
    <input type='file' id='fileInput'class='width70_prop' onchange="readURL(this);"></input> 
    <button onclick="sendPost()">sendPost</button> 
</body> 

服務器端代碼

<html> 
    <head> 
    <? 
      $FileName = $_POST['img_name']; 
      $data = $_POST['data']; 
      list($header, $content) = split('[,]', $data); 
      file_put_contents($FileName, base64_decode($content)); 
      print "Data Written"; 
    ?> 
    <script> 
    function showImg(){ 
    var imgSrc = "<?=$data?>"; 
    var imgDiv = document.getElementById('imgDiv'); 
    imgDiv.src = imgSrc; 
    } 
    </script> 
    </head> 
    <body> 
    <img id='imgDiv'></img> 
    <button onclick="showImg()">show</button> 
    </body> 
</html> 

發送到服務器團塊具有信息來源約報頭和它的內容。 當我拆分標題然後保存解碼其內容,它的工作.... 我改變了上面的代碼現在工作。 thx guys

+0

你正在寫你的文件作爲base64字符串,你應該真的嘗試解碼它,也許去一個xhr而不是那個東西。 – Delta

回答

1

首先,$_POST["data"]中沒有任何內容,因爲索引(數據)是通過JSON key : value對中的鍵命名的,而不是JavaScript var

其次,你應該改變這樣的:

$Handle = fopen($FileName, 'w'); 
fwrite($Handle, $data); 
print "Data Written"; 
fclose($Handle); 

這樣:

file_put_contents($FileName, base64_decode($data)); 
+0

謝謝..謝謝!! blob發送標題和內容。我把頭文件和內容表單blob分開,然後解碼內容,就像你提供的那樣。它再次運行...... thx –

1

哎呀..有人打我吧... 當你在客戶方讀取文件作爲Dataurl: reader.readAsDataUrl(...) 該文件被編碼爲base64字符串..這就是爲什麼如果直接保存數據,它的格式不正確。如前面的答案所述,您將base64_decode解碼爲正確的格式。