用ajax和php上传图像

我想用ajax上传图片。 在本单元中：

单击

浏览

并选择图像后，它将上载并显示在文件字段上

添加标题和说明并单击按钮后，该图像将显示在下方，上部图像字段将为空白

---

你不能通过AJAX上传文件。您需要使用iFrame或基于Flash的上传程序。

尝试使用JQuery插件上传图像

可能是

---

这将给出一个方法。

假设您在服务器端有一个句柄。。下面是一个关于如何在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>

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输入的DocumentFragment builder。
事件侦听器，并按实用程序函数执行。

---

*这两个都很容易移除

实际上，您至少可以在最新版本的chrome中使用Jquery中的ajax功能上传图像

HTML:

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

---

该脚本将通过Ajax向当前页面发送一个包含已创建文件数据的post请求。您可以通过更改url参数来更改目的地。

请发布您当前的HTML/Javascript。您尝试了什么，什么不起作用，错误代码在哪里？我非常抱歉不得不问，但是我似乎把我的水晶球放错地方了。我更喜欢使用iframe，因为我们不是为flash而设计的……这是Ajax。Ajax不是XHR。XHR只是实现Ajax最常用的方法。Firefox>=3和Chrome>=2支持XHR上传。@Piemon它使用IE 8在我的系统上工作。请确保您安装了flash player。我知道这已经过去三年了。。但是我在寻找的时候发现了这个。所以我想其他人也会这样。这是您2012年的答案我收到一个错误“ReferenceError:By未定义”“var form=document.forms['image-upload']，results=By.id（'upload-results'）；”实用程序函数也需要包括在内。请参见代码下面的注释。或者将By.id更改为document.getElementById为什么要在jquery中包装表单元素，而只是为了再次读取它<代码>$（此）[0]==

此

$("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;
});