如何将文件的内容发送到我的服务器？答案

【问题标题】：How can I send the contents of a file to my server?如何将文件的内容发送到我的服务器？
【发布时间】：2013-07-28 02:04:17
【问题描述】：

我正在尝试让用户导入我解析服务器（rails 应用程序）端的 OPML 文件。我遇到了麻烦，因为我的服务器似乎没有获取信息（成功和错误函数都没有运行，即使我将其他数据硬编码到调用中，调用也不会改变）。

这是我嵌入页面的内容：

<script>
function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object

      // Loop through the FileList
      for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
          return function(e) {
            // Print the contents of the file
            var span = document.createElement('span');                    
            span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
            document.getElementById('list').insertBefore(span, null);
          };

          $.ajax({
            type: 'GET',
            url: "/parse_opml",
            data: {file: f},
            success: function(details, response) {
              console.log('woo!');
            },
            error: function(data, response) {
              console.log('boooo');
            }
          });
        })(f);

        // Read in the file
        reader.readAsText(f);
      }
    }

    document.getElementById('the_o').addEventListener('change', handleFileSelect, false);
</script>

<input id="the_o" name="files[]" type="file">

查看 chrome 的网络面板，我看到调用：Request URL:blob:http%3A//localhost%3A3000/14e2be6b-059f-47f5-ba37-97eda06242b4，其预览和响应是我的 .txt 文件的内容。但就像我说的，服务器永远不会得到那个文本，所以我很困惑。

非常感谢任何帮助，谢谢！

回答

我最终只使用了这个：JavaScript: Upload file

客户端代码：

%form{:enctype => 'multipart/form-data', :action => '/parse_opml', :method => 'post'}
   %input{:type => 'file', :name => 'file', :id => 'the_o'}
   %input{:type => 'submit', :value => 'go'}

服务器代码：

f = File.open(params[:file].tempfile, 'r')
c = f.read

像魅力一样工作！

【问题讨论】：

标签： javascript html ruby-on-rails ajax jquery

【解决方案1】：

Javascript 无法将上传的文件发布到服务器，因为这是一个限制（出于安全原因，我假设）。

查看有关通过 javascript 发布文件的其他问题： JavaScript: Upload file

该问题的答案是您只能使用 Flash 来完成，但也有 iframe 替代方案用于上传和发布。

看看这个以及替代解决方案： https://github.com/Widen/fine-uploader

【讨论】：

【解决方案2】：

您的 ajax 请求不是在您从之前的 onload 函数返回时发送的事件。
您可以使用 XHR2 在最新的浏览器上通过 ajax 发送文件

reader.onload = (function(theFile) {
  var data = new FormData();
  data.append('file',theFile);
  $.ajax({
    type: 'POST',
    processData: false,
    contentType: false,
    url: "/parse_opml",
    data: data,
    success: function(details, response) {
      console.log('woo!');
    },
    error: function(data, response) {
      console.log('boooo');
    }
  });
  return function(e) {
    // Print the contents of the file
    var span = document.createElement('span');                    
    span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
    document.getElementById('list').insertBefore(span, null);
  };
})(f);

【讨论】：