我想用jQuery异步上传文件。这是我的HTML：

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

这是我的jQuery代码：

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

我只获取文件名，而不是上传文件。我该怎么做才能解决此问题？

#1楼

我已经在Rails环境中编写了此代码。如果您使用轻量级的jQuery-form插件，则仅包含五行JavaScript。

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

这就是jQuery-form插件起作用的地方。

这是它的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上使用它，它的工作原理像冠军。

#2楼

我一直在使用下面的脚本上传图像，但效果很好。

的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来显示上传动画和上传完成后的响应。

最好的部分是，使用此脚本时，您可以随文件发送额外的数据，例如ids等。我已经提到了脚本中的extra-data 。

在PHP级别，这将像正常文件上传一样工作。可以将多余数据作为$_POST数据进行检索。

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

#3楼

您可以非常轻松地在原始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);

#4楼

注意：此答案已过时，现在可以使用XHR上传文件。

您不能使用XMLHttpRequest （Ajax）上传文件。您可以使用iframe或Flash模拟效果。出色的jQuery表单插件，可通过iframe发布文件以获得效果。

#5楼

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

使用“新” HTML5 file API时要了解的重要一点是，直到IE 10才支持它。如果您要针对的特定市场对旧版本Windows的倾向高于平均水平，则可能无法使用它。

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

截至本次编辑的2019年，距离我最初的回答差不多11年了。 IE9及更低版本在全球范围内均在1％左右，但仍存在使用率更高的集群。

最重要的外卖从这个-whatever的特征-是， 请检查您的用户使用的浏览器 。如果不这样做，您将学到一个快速而痛苦的课程，以了解为什么“为我工作”在交付给客户的产品中不够好。 caniuse是一个有用的工具，但请注意他们从哪里获得人口统计信息。它们可能与您的不一致。这从未比企业环境更真实。

我在2008年的回答如下。

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

这是一个“真实”的帖子，因此并非完全互动。如果您需要状态，则需要服务器端进行处理。具体取决于您的服务器。 ASP.NET具有更好的机制。 PHP普通失败，但是您可以使用Perl或Apache修改来解决它。

如果您需要多个文件上传，则最好一次执行一个文件（以克服最大文件上传限制）。将第一个表单发布到iframe中，使用上述方法监视进度，完成后，将第二个表单发布到iframe中，依此类推。

或使用Java / Flash解决方案。他们可以更灵活地处理自己的帖子...

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3136314

标签

perl