如何使用表單數據對象將圖像從響應移動網站發送到服務器

Question

我正在更新具有響應移動版本的網站。用戶創建一個包含圖像的配置文件。在瀏覽器版本中，所有包含圖像的數據都會上傳。在響應版本中，除圖像以外的所有數據都會上傳。這是我從本網站和其他人瞭解到的，我必須使用getElementById（）和formData對象從移動網站獲取圖像到服務器。除了我在StackOverflow中找到的資源外，我還使用gist.githum.com的Eric Bidelman編寫的代碼。經過多次嘗試後，我無法使其工作。我的formData代碼不起作用，我不知道如何將它集成到現有的代碼中。我很欣賞這兩個問題的任何幫助。

在此先感謝。

這是我正在使用的代碼。

<form id="form" name="form" action="post.php" method="post" onsubmit="return check_inputs();" enctype="multipart/form-data" > 
      <fieldset> 
       <legend>About Me</legend> 

       <label>Email:</label><input data-theme="a" name="email" type="text" value="<?php echo $email?>" maxlength="30" /><span id="s1">*</span>     
       <label>Image:</label><input data-theme="a" id="image" name="image" type="file" accept="image/*" <?php echo $image?>" size="30" /> 

       xhr.send(FormData).html 

      </fieldset> 
      <fieldset> 
      <input data-theme="a" data-ajax="false" name="submit" class="Submit" type="submit" value="Submit" /> 
      </fieldset> 
</form> 

post.php 

//code to resize image file and send to images folder. 

//code to write data to the database. 

xhr.send(FormData).html 
<script> 
    document.getElementById('image').addEventListner('change', function(e){ 
    var file = this.files[0]; 
    var fd = new FormData() 
    fd.append('image', file); 

    var xhr = new XMLHttpRequest() 
    xhr.open('POST',handle_file_upload.php, true); 

    xhr.onload = function(){ 
     if (this.status == 200{ 
      var reso = JSON.parse(this.response); 

      console.log('Server got:', resp); 

      var image = document.createElement('img'): 
      image.src = resp.dataUrl; 
      document.body.appendChild(image); 
     }; 
    }; 
    xhr.send(fd); 
}, false); 
</script> 
<!--[if IE]> 
<script src = "http:ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> 
<script>CFInstall.check({mode: 'overlay'});</script> 
<![endif]-->: 

handle_file_upload.php 
<?php 
$fileName = $_FILES['image']['name']; 
$fileType = $_FILES['image']['type']; 
$fileContent = file_get_contents($_FILES['image']['tmp_name']); 
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); 

$json = json_encode(array(
'name' => $fileName, 
'type' => $fileType, 
'dataUrl' => $dataUrl, 
)); 

echo $json; 
?> 

Answer 1

看起來你有額外的雙引號。

使其

<input data-theme="a" id="image" name="image" type="file" accept="image/*" <?php echo $image?> size="30" /> 

（尺寸前引號去掉=）

另外，你爲什麼需要在那裏？