您可以在这里看到一个工作演示的解决方案，该演示允许您预览表单文件并将其提交到服务器。对于您的情况，您需要使用Ajax来促进文件上传到服务器：

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

提交的数据是表单数据。在jQuery上，使用表单提交函数而不是单击按钮提交表单文件，如下所示。

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

查看更多详细信息

Try

异步函数saveFile（）{let formData=新formData（）；formData.append（“file”，file.files[0]）；wait-fetch（'addFile.do'，｛method:“POST”，body:formData｝）；alert（“上传的数据：”）；}<span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input type=“button”value=“Upload”onclick=“saveFile（）”/>

content-type='multipart/form-data'由浏览器自动设置，文件名也自动添加到文件名FormData参数中（服务器可以轻松读取）。下面是一个更为成熟的错误处理和json添加示例

异步函数saveFile（inp）{让用户＝{name:'john'，年龄：34}；let formData=新formData（）；let photo=inp.files[0]；formData.append（“照片”，照片）；formData.append（“用户”，JSON.stringify（用户））；尝试{let r=等待获取（'/upload/image'，｛method:“POST”，body:formData｝）；console.log（'HTTP响应代码：'，r.status）；警报（“成功”）；}捕获（e）{console.log（'休斯顿我们有问题…：'，e）；}}<input-type=“file”onchange=“saveFile（this）”><br><br>在选择文件之前，打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中，我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>

为未来读者整理。

异步文件上载

使用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到不同回退的整个堆栈，以及一些有用的功能来简化过程。根据您的需要和要求，您可能需要考虑一个简单的实现或其中一个插件。

我已经在Rails环境中编写了这篇文章。如果您使用轻量级的jQuery表单插件，它只有大约五行JavaScript。

挑战在于如何让AJAX上传工作，因为标准的remote_form_for不理解多部分表单提交。它不会发送Rails通过AJAX请求返回的文件数据。

这就是jQuery表单插件发挥作用的地方。

下面是它的Rails代码：

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

下面是相关的JavaScript：

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

这是Rails控制器的动作，非常简单：

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

在过去的几周里，我一直在Bloggity上使用这个，它的效果就像一个冠军。

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

使用简单的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";
}
?>

下面是示例应用程序

为此，我建议使用Fine Uploader插件。您的JavaScript代码为：

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});