使用ajax和php上傳圖片

Question

我想使用ajax上傳圖片。 在這個模塊：

1. 在點擊browse並選擇圖像，它將被上傳並在文件中的字段顯示。
2. 按鈕添加標題和說明，並點擊後，該圖像將顯示在下方和上像場將是空白

Answer 1

您無法通過AJAX上傳文件。您需要使用IFRAME或基於Flash的上傳器。

Answer 2

嘗試使用JQuery插件上傳圖片。

可能http://www.uploadify.com/

這會給一個想法如何做到這一點。

Answer 3

假設你在服務器端有一個句柄..這裏是一個小函數和關於如何在javascript中實現'iframe hack'的例子。

HTML

<form name="image-upload"> 
<input type="file" name="image" /></br> 
<button type="submit" name="upload">Upload</button> 
<div id="upload-results"></div> 
</form> 

的JavaScript

var fileUpload = function(form /* HTMLElement */, action /* Form Action URL */, callback /* Callback function */) { 
    /* vars */ 
    var atribs = { 
     "target": "upload_iframe", 
     "action": action, 
     "method": "post", 
     "enctype": "multipart/form-data", 
     "encoding": "multipart/form-data" 
    }, iframe; 
    /* iframe listener */ 
    var ilistener = function() { 
     var results; 
     listener.remove(this, 'load', ilistener); 
     if('contentDocument' in this) { 
      results = this.contentDocument.body.innerHTML; 
     } else if ('contentWindow' in this) { 
      results = this.contentWindow.document.body.innerHTML; 
     } else if ('document' in this) { 
      results = this.document.body.innerHTML; 
     } else { 
      throw "i'm dead jim :/"; 
     } 
     callback.apply(this,[results]); // call the callback, passing the results 
     this.parentNode.removeChild(this); // remove the iframe 
    }; 

    /* create the iframe */ 
    form.parentNode.appendChild(FragBuilder([{"tagName": "iframe","id": "upload_iframe","name": "upload_iframe","style": {"height": "0","width": "0","border": "0"}}])); 
    /* collect the iframe back */ 
    iframe = By.id('upload_iframe'); 
    /* set the form properties */ 
    for(var attr in atribs) { 
     if(attr in form) { 
      form[attr] = atribs[attr]; 
     } 
    } 
    /* attach the event listener to the iframe */ 
    listener.add(iframe, 'load', ilistener); 
    /* submitting the form */ 
    form.submit(); 
}; 

// get the form, and the results area 
var form = document.forms['image-upload'], results = By.id('upload-results'); 
// listen for the form submit, capture it, and run the iframe upload. 
listener.add(form, 'submit', function(e) { 
    e.preventDefault(); 
    results.innerHTML = 'Uploading...'; 
    fileUpload(this, 'server.php' /* really anything */, function(data) { 
     console.log(data); 
      results.innerHTML = "Uploaded!"; 
    }); 
}); 

請注意：爲了簡單起見我使用以下工具。 https://github.com/rlemon/FragBuilder.js來自JSON輸入的DocumentFragment構建器。
https://gist.github.com/2172100事件監聽器，和按實用功能。
*這些都很容易刪除。

Answer 4

實際上，您可以在Jquery中使用ajax函數上傳圖像，至少使用lates版本的chrome。

HTML：

<form action="/" enctype="multipart/form-data" method="post" accept-charset="utf-8"> 
    <input type="file" name="image"/> 
    <button type="submit"> 
</form> 

JS：

$("form").submit(function(){ 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
     url: window.location.pathname, 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
       alert(data); 
     } 
    }); 
    return false; 
}); 

該腳本將發送通過Ajax創建的文件數據到當前頁面POST請求。您可以通過更改url參數來明顯改變目的地。