[英]image upload with ajax and php
我想使用ajax上傳圖片。 在此模塊中:
browse
並選擇圖像后,它將被上傳並顯示在文件字段中。 您無法通過AJAX上傳文件。 您需要使用IFRAME或基於Flash的上傳器。
實際上,您可以在jQuery中使用Ajax函數上傳圖片,而至少要使用最新版本的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將發布請求以及創建的文件數據發送到當前頁面。 您可以通過更改url參數來明顯地更改目標。
假設您在服務器端有一個句柄。..這是一個小函數,以及有關如何在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!";
});
});
請注意:為簡單起見,我使用了以下實用程序。 JSON輸入中的https://github.com/rlemon/FragBuilder.js DocumentFragment構建器。
https://gist.github.com/2172100事件監聽器和實用工具功能。
*這些都可以輕松刪除。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.