var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

您可以使用表单数据发布包括图像在内的所有值。

你可以很容易地用普通JavaScript实现。以下是我当前项目的片段：

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

2019年更新：这仍然取决于您的人口统计使用的浏览器。

使用“新”HTML5文件API需要了解的一件重要事情是，直到IE 10才支持它。如果你所瞄准的特定市场对旧版本Windows的倾向高于平均水平，你可能无法访问它。

截至2017年，约5%的浏览器是IE 6、7、8或9之一。如果你进入一家大公司（例如，这是一个B2B工具或你提供的培训工具），这个数字可能会飙升。2016年，我与一家在60%以上的机器上使用IE8的公司打过交道。

截至本期编辑时，已是2019年，距离我最初的答案已经过去了11年。IE9和IE9的全球使用率在1%左右，但仍有使用率较高的集群。

无论有什么功能，重要的一点是检查用户使用的浏览器。如果你不这样做，你会很快学到一个痛苦的教训，为什么“为我工作”在交付给客户时不够好。犬科动物是一种有用的工具，但请注意它们的人口统计数据来源。它们可能与您的不一致。这比企业环境更真实。

我2008年的回答如下。

然而，有一些可行的非JS文件上传方法。您可以在页面上创建一个iframe（用CSS隐藏），然后将表单定位到该iframe。主页不需要移动。

这是一个“真实”的帖子，所以它不完全是交互式的。如果你需要状态，你需要服务器端的东西来处理。这取决于您的服务器。ASP.NET有更好的机制。PHP失败了，但您可以使用Perl或Apache修改来解决它。

如果您需要多个文件上传，最好一次上传一个文件（以克服最大文件上传限制）。将第一个表单发布到iframe，使用上面的方法监视其进度，完成后，将第二个表单发布给iframe等等。

或者使用Java/Flash解决方案。他们在处理自己的帖子时更加灵活。。。

示例：如果使用jQuery，您可以轻松地上传文件。这是一个小而强大的jQuery插件，http://jquery.malsup.com/form/.

实例

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

我希望这会有帮助

这里只是另一个如何上传文件的解决方案（没有任何插件）

使用简单的Javascript和AJAX（带有进度条）

HTML部分

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS部分

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

PHP部分

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

下面是示例应用程序

我一直在使用下面的脚本来上传图像，这很好。

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

解释

我使用response div显示上传动画和上传完成后的响应。

最好的部分是，当您使用此脚本时，可以随文件发送额外的数据，如id等。我在脚本中提到了额外的数据。

在PHP级别，这将作为正常的文件上传工作。额外数据可以作为$_POST数据检索。

这里你没有使用插件之类的东西。您可以根据需要更改代码。你不是盲目地在这里编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。