这是我的解决方案。

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

和js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

控制器

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

使用HTML5，您可以使用Ajax和jQuery上传文件。不仅如此，您还可以进行文件验证（名称、大小和MIME类型）或使用HTML5进度标记（或div）处理进度事件。最近我不得不做一个文件上传器，但我不想使用Flash或Iframes或插件，经过一些研究，我想出了解决方案。

HTML：

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

首先，如果需要，可以进行一些验证。例如，在文件的.on（'change'）事件中：

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

现在，单击按钮即可提交$.ajax（）：

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

正如你所看到的，通过HTML5（以及一些研究）文件上传不仅变得可能，而且非常容易。尝试使用Google Chrome，因为示例中的一些HTML5组件在每个浏览器中都不可用。

jQueryUploadify是我以前用来上传文件的另一个好插件。JavaScript代码如下所示：code。但是，新版本在Internet Explorer中不起作用。

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

我做了大量的搜索，我找到了另一种不用任何插件、只使用ajax上传文件的解决方案。解决方案如下：

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

在使用XMLHttpRequest进行异步上载时，可以传递附加参数和文件名（不依赖flash和iframe）。将附加参数值附加到FormData并发送上载请求。

var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

此外，Syncfusion JavaScript UI文件上传只需使用事件参数即可为该场景提供解决方案。您可以在此处找到文档，并在此处输入链接描述

您可以简单地使用jQuery.ajax（）上传。

HTML格式：

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Java脚本：

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

为未来读者整理。

异步文件上载

使用HTML5

如果支持FormData和File API（这两个HTML5功能），则可以使用$.ajax（）方法使用jQuery上载文件。

您也可以在不使用FormData的情况下发送文件，但无论哪种方式，文件API都必须以XMLHttpRequest（Ajax）发送的方式处理文件。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

有关快速纯JavaScript（无jQuery）示例，请参阅“使用FormData对象发送文件”。

退路

当HTML5不受支持（没有文件API）时，唯一的其他纯JavaScript解决方案（没有Flash或任何其他浏览器插件）是隐藏的iframe技术，它允许在不使用XMLHttpRequest对象的情况下模拟异步请求。

它包括使用文件输入将iframe设置为表单的目标。当用户提交请求并上传文件时，响应显示在iframe中，而不是重新呈现主页。隐藏iframe使整个过程对用户透明，并模拟异步请求。

如果处理得当，它实际上应该可以在任何浏览器上运行，但它对如何从iframe中获取响应有一些警告。

在这种情况下，您可能更喜欢使用像Bifröst这样的包装器插件，它使用iframe技术，但也提供jQueryAjax传输，允许仅使用$.Ajax（）方法发送文件，如下所示：

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

插件

Bifröst只是一个小包装，它为jQuery的ajax方法添加了回退支持，但前面提到的许多插件，如jQuery表单插件或jQuery文件上载，都包括从HTML5到不同回退的整个堆栈，以及一些有用的功能来简化过程。根据您的需要和要求，您可能需要考虑一个简单的实现或其中一个插件。