Question

我正在尝试让用户导入我解析服务器（rails app）端的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文件的内容。但就像我说的那样，服务器永远不会得到那个文本，所以我很困惑。

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

ANSWER

我最终只使用了这个：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

像魅力一样！

Answer 1

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

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

关于这些问题的答案说你只能使用flash来实现，但也有上传和发布的iframe替代方案。

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

Answer 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);

如何将文件内容发送到服务器？

2 个答案: