使用 AJAX 上传文件 - xhr [英] Upload files with AJAX - xhr

问题描述

我正在尝试使用 AJAX 上传文件，但我的输出始终为空...

I'm trying to upload files with AJAX but my output is always empty...

那么代码有什么问题或遗漏了什么?谢谢！

so what's wrong or what's missing from the code ? thanks!

HTML:

<form id="data" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

JS:

$(":file").bind('change blur', function(e) {
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    console.log(name);
    console.log(size);
    /**
        OUTPUT:
            2-years-anniversaryv1.png jquery.form.img.js:10
            18407 
    */
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) {
                myXhr.upload.addEventListener('progress', progress, false); 
            }
            return myXhr;
        },
        success: function(result)
        {
            console.log($.ajaxSettings.xhr().upload);
            alert(result);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

function progress(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

PHP:

private function upload_file() {

   $this->getLog(print_r($_FILES,true));

   $returnData = array("file" => 'asd');

   echo json_encode($returnData);

}

getLog 输出:

Array
(
)

Array
(
)

Array
(
)

推荐答案

如果通过 AJAX 上传，则需要使用 fopen() 访问文件内容:

If you upload through AJAX, you'll need to access the file's content using fopen():

<?php
$f = fopen('php://input','rb');
$target = fopen('file_name_here','wb');
while($chunk=fread($f,8192)){
    fwrite($target,$chunk);
}
fclose($f);
fclose($target);

此外，您还需要使用 FileReader 类读取文件的内容:

Also, you'll need to read the file's content using the FileReader class:

var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e){
    var xhr = new XMLHttpRequest();
    xhr.onload = function(){
        //upload finished
    }
    xhr.open('POST','path/to/upload.php',true);
    xhr.send(e.target.result);
}
reader.readAsArrayBuffer(file);

这篇关于使用 AJAX 上传文件 - xhr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！