使用javascript上傳圖片

Question

我被困了!! :(我想上傳帶有標題和標題的圖像文件，我想使用javascript驗證標題標題和文件選擇。

我的HTML在這里：

<input type="text" name="title2" id="title2" value="title" /><br />

<textarea cols="50" rows="10" name="caption" >caption goes here...</textarea><br />
<input type="file" name="photo" id="photo" /><br />
<button id="submit_info" onclick="photowcap()" >post</button><br />

和我的javascript在這里：

function photowcap()
{

var title = document.getElementsByName("title2")[0].value;
var photo = document.getElementsByName("photo")[0].value;
var captions = document.getElementsByName("caption")[0].value;
var caption = encodeURIComponent(captions)

var xmlhttp;
if(title == "" || title == " " || title == "title")
{
    document.getElementsByName("title2")[0].focus();
    document.getElementsByName("title2")[0].value="";
    return;
}
else if(captions == "" || captions == " " || captions == "caption goes here..."){
    document.getElementsByName("caption")[0].focus();
    document.getElementsByName("caption")[0].value="";
    return;
}
else if(photo == ""){
    alert("please choose image");
}
else{
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            alert("Success!!!");
        }
    }
xmlhttp.open("GET","photowcap.php?    title="+title+"&caption="+caption+"&photo="+photo,true);
    xmlhttp.send();}

}

並使用PHP保存它：

<?php

include("admin_conn.php");

$title = $_GET["title"];
$caption = $_GET["caption"];
$photo = $_GET["photo"];
$time=time();
$date = (date("D F d Y",$time));

$query_photowcap = "INSERT INTO school_updates(title, photo, caption, date, time)     VALUES('$title','$photo','$caption','$date','$time')";
mysql_query($query_photowcap);

?>

它只保存文件路徑為“C：fakepath / filename ....”因為我不知道如何使用javascript獲取文件名，最后我有這個代碼將實際圖像保存到文件夾但我不真的得到我應該放置的地方：感謝提前:)

<?php

error_reporting(0);
$max_file_size = 200 * 1024; #200kb
if (($_FILES["photo"]["type"] == "image/gif")
  || ($_FILES["photo"]["type"] == "image/jpeg")
  || ($_FILES["photo"]["type"] == "image/png" )
  && ($_FILES["photo"]["size"] < $max_file_size))
  {
  $path = 'images/' . uniqid();
  move_uploaded_file($_FILES["photo"]["tmp_name"],
  $path.$_FILES["photo"]["name"]);

  }
else
  {
  echo "Files must be either JPEG, GIF, or PNG and less than 200 kb";
  }

?>

Answer 1

為了使用$_FILES超全局訪問文件，需要使用multipart/form-data內容類型標頭和適當的屬性發送它們。 不幸的是你不能手動使用xhr的send方法，因為發送字符串將自動轉換為UTF-8 。 幸運的是，您仍然可以從javascript的window.File發送二進制數據，例如文件。文件。

舊版瀏覽器不支持此功能。 代碼看起來像

var file = document.getElementById('photo').files[0];

...

xhr.send(file);

然后在服務器端，您將需要直接訪問輸入緩沖區以獲取此文件的保留

$file = file_get_contents('php://input');

如果你堅持使用$_FILES你可以在javascript中使用FormData對象。 我之所以選擇這個作為第二種選擇，是因為我聽說過更多的支持問題而且我個人現在避免使用它。

var formData = new FormData(document.getElementById('theForm'));
...
xhr.send(formData);

編輯2016

現在已經有一段時間了，因為我發布了這個答案，現在廣泛支持FormData對象，如果您希望上傳文件以及其他數據，您可以查看它。

Answer 2

您正在嘗試使用ajax上傳圖像...簡短回答...通常您不能。 您需要上傳多部分/表單數據，使ajax上傳變得困難。

一個簡單的解決方法是用js驗證表單，然后通常提交它。 像這里： Ajax上傳圖片 - 好吧......忽略標題，有誤導性。