html FileReader : blob을 이미지 파일로 변환 하시겠습니까?

클라이언트 측 코드
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

출처

2012-10-23 Seho Lee

당신은 파일을 base64 문자열로 쓰고 있습니다. 실제로 먼저 디코딩 해보고 그 대신에 xhr로 가야합니다. – Delta

먼저 색인 (데이터)이 JSON key : value 쌍의 키로 지정되었으므로 var이 아니기 때문에 $_POST["data"]에는 아무 것도 없습니다.

둘째, 당신은이 설정을 변경해야합니다

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

을 여기에 : 당신은 클라이언트 측에 Dataurl으로 파일을 읽을 때

이

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

출처

2012-10-23 03:50:06 SomeKittens

감사합니다 .. 감사합니다 !! blob은 머리글과 내용을 모두 보냈습니다. 나는 헤더와 콘텐트 형태의 블롭 (bllob)을 쪼개고 나서, 제공되는 것처럼 콘텐트를 디코딩했다. –

죄송합니다 .. 누군가가 ... 그것에 을 날 이길 : reader.readAsDataUrl (...) 파일은 base64 문자열로 인코딩됩니다. 따라서 데이터를 직접 저장하면 올바른 형식이 아닙니다. 이전 답변에서는 데이터를 올바른 형식으로 base64_decode합니다.

출처

2012-10-23 03:52:33 user1600124

html FileReader : blob을 이미지 파일로 변환 하시겠습니까?

답변

관련 문제