0

クライアント側のコード

<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>

サーバーに送信されたblobには、ヘッダーとそのコンテンツに関する情報が含まれていました。ヘッダーを分割し、そのコンテンツをデコードして保存すると、機能しました。上記のコードを変更しましたが、現在は機能しています。thxみんな

4

2 に答える 2

1

おっと..誰かが私を殴りました...クライアント側でDataurlとしてファイルを読み取ると：reader.readAsDataUrl（...）ファイルはbase64文字列にエンコードされます..そのため、データを直接保存すると、正しい形式ではありません。前の回答が述べているように、データを正しい形式にbase64_decodeします。

于 2012-10-23T03:52:33.007 に答える
1

まず、インデックス (データ) はJavaScript ではなく JSON ペア$_POST["data"]のキーによって名前が付けられるため、何もありません。key : valuevar

次に、これを変更する必要があります。

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

これに：

file_put_contents($FileName, base64_decode($data));
于 2012-10-23T03:50:06.773 に答える