通過AJAX請求上傳文件數據

我需要通過我的表單上傳文件，但我不知道如何將文件上傳到我的表單發佈博客條目。我不知道如何用JQuery執行ajax。我不知道如何通過ajax請求發送圖像文件/數據，任何幫助，將不勝感激。通過AJAX請求上傳文件數據

這是搞什麼名堂了ATM：

CP.PHP

<?php 
    include("../scripts/database_connx.php"); 
    include("../scripts/functions.php"); 
    start_secure_session(); 
    if(logged_in($sqli_con) === false) { 
     header("Location: ../index.php"); 
     exit(); 
    } 
    $cp = true; 
?> 
<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>TridantDesigns | Admin</title> 
     <link rel="stylesheet" type="text/css" href="../style/reset.css" /> 
     <link rel="stylesheet" type="text/css" href="../style/main.css" /> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       setInterval(function() { 
        if(window.XMLHttpRequest) { 
         get_entries = new XMLHttpRequest(); 
        } else { 
         get_entries = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 

        get_entries.onreadystatechange = function() { 
         if(get_entries.readyState == 4 && get_entries.status == 200) { 
          document.getElementById("r_e").innerHTML = get_entries.responseText; 
         } 
        } 

        get_entries.open("GET", "get_entries.php", true); 
        get_entries.send(); 
       }, 50000); 
      }); 
     </script> 
    </head> 
    <body> 
     <?php include("../scripts/includes/header.inc.php"); ?> 
     <div id="site_content"> 
      <div id="new_entry"> 
       <form> 
        <h1>Add A New Blog Entry</h1> 
        <input type="text" name="entry_title" maxlength="40" placeholder="Entry Title(40 Char)" /><br /> 
        <textarea name="entry_contents" placeholder="Entry Content" /></textarea><br /> 
        <label for="image">Choose Image File:</label> 
        &nbsp;<input type="file" name="image" /><br /> 
        <input type="button" value="Post Entry" onclick="post_entry(this.form, this.form.entry_title, this.form.entry_contents, this.form.image);" /> 
       </form> 
       <div id="post_error"> 

       </div> 
      </div> 

      <div id="remove_entry"> 
       <h1>Remove Entries(Click to remove)</h1> 
       <div id="r_e"> 
        <?php 
         get_entries($sqli_con); 
        ?> 
       </div> 
      </div> 
     </div> 

     <script> 
      function post_entry(form, title, contents, image) { 
       document.getElementById("post_error").style.display = "block"; 
       if(title.value.length < 1) { 
        document.getElementById("post_error").innerHTML = "Please enter an entry title!"; 
        return; 
       } 
       if(title.value.length > 40) { 
        document.getElementById("post_error").innerHTML = "Title can not be longer than 40 characters!"; 
        return; 
       } 
       if(contents.value.length < 1) { 
        document.getElementById("post_error").innerHTML = "Please enter some content!"; 
        return; 
       } 

       if(window.XMLHttpRequest) { 
        post_entry_ = new XMLHttpRequest(); 
       } else { 
        post_entry_ = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

       post_entry_.onreadystatechange = function() { 
        if(post_entry_.readyState == 4 && post_entry_.status == 200) { 
         document.getElementById("post_error").innerHTML = post_entry_.responseText; 
         if(post_entry_.responseText == "<response>Entry Added</response>") { 
          //get_entries(); 
         } 
        } 
       } 

       post_entry_.open("POST", "add_entry.php", true); 
       post_entry_.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
       post_entry_.send("title="+title.value+"&contents="+contents.value+"&image="+image.value); 

      } 

      function remove_entry() { 

      } 
     </script> 
     <?php include("../scripts/includes/footer.inc.php"); ?> 
    </body> 
</html>

Add_Entry.PHP

<?php 
    include("../scripts/database_connx.php"); 
    include("../scripts/functions.php"); 
    start_secure_session(); 

    if(logged_in($sqli_con) === false) { 
     header("Location: ../index.php"); 
     exit(); 
    } 

    $title = mysqli_escape_string($sqli_con, strip_tags($_POST['title'])); 
    $contents = mysqli_escape_string($sqli_con, strip_tags($_POST['contents'])); 
    $image = mysqli_escape_string($sqli_con, strip_tags($_POST['image'])); 
    $poster = mysqli_escape_string($sqli_con, strip_tags($_SESSION['tridantblog_username'])); 

    echo var_dump($image); 

    if($image == "") { 
     if($stmt = $sqli_con->prepare("INSERT INTO entries (title, contents, poster) VALUES (?, ?, ?)")) { 
      $stmt->bind_param("sss", $title, $contents, $poster); 
      $stmt->execute(); 
      $stmt->store_result(); 
      $stmt->fetch(); 
      if($stmt->rows_affected > 0) { 
       $stmt->close(); 
       echo "<response>Added to database!</response>"; 
      } else { 
       $stmt->close(); 
       echo "<response>Could not add entry to the database!</response>"; 
      } 
     } 
    } else { 

     #Check and upload images here! 

     if($stmt = $sqli_con->prepare("INSERT INTO entries (title, contents, image, poster) VALUES (?, ?, ?, ?)")) { 
      $stmt->bind_param("sss", $title, $contents, $poster); 
      $stmt->execute(); 
      $stmt->store_result(); 
      if($stmt->rows_affected > 0) { 
       $stmt->close(); 
       echo "<response>Added to database!</response>"; 
      } else { 
       $stmt->close(); 
       echo "<response>Could not add entry to the database!</response>"; 
      } 
     } 
    } 
?>

來源

2013-02-05 Liam Potter

你應該看看這篇文章：http：//stackoverflow.com/questions/2320069/jquery-ajax-file-upload。這不是最近的事情，但我相信大部分情況仍然適用。您可能需要一個使用iframe或flash文件的外部插件。 – Kippie

@MCL以及'jQuery.ajax（）'方法如何幫助將文件上傳到服務器異步？ –

@DarinDimitrov在問題完成編輯之前，我問了我的問題。現在我看到了代碼，這是一個完整的故事。 – MCL

與AJAX上傳文件時使用舊XmlHttpRequest對象不支持。可能的解決方法包括使用文件上傳控件，例如Uploadify，Fine Uploader或支持上載文件的jQuery form plugin。此外，支持HTML 5 File API和XmlHttpRequest2對象的現代瀏覽器將允許您實現本機。看看following article這說明如何實現這一目標。

例如，讓我們假設你有下面的HTML表單：

<form action="upload.cgi" method="post" enctype="multipart/form-data" onsubmit="return upload(this);"> 
    <input type="file" name="file" /> 
    <button type="submit">Upload file to the server</button> 
</form>

你可以有將使用AJAX進行上傳腳本：

function upload(formElement) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open(formElement.method, formElement.action); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      // Handle response. 
      alert(xhr.responseText); // handle response. 
     } 
    }; 
    xhr.send(new FormData(formElement)); 
    return false; 
}

您還可以看看關於HTML5表單的following article。

來源

2013-02-05 07:54:07

'不支持使用AJAX上傳文件' – Musa

@Musa，我已經更新了我的答案，更加精確：'使用舊的XmlHttpRequest對象不支持使用AJAX上傳文件。我還舉例說明了如何用現代瀏覽器中內置的新XHR2對象實現這一點。 –

通過AJAX請求上傳文件數據

回答

相關問題