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

我试图让用户导入一个我在服务器端解析的OPML文件（rails应用程序）。我遇到了问题，因为我的服务器似乎没有获得信息（无论是成功还是错误函数都没有运行，即使我将其他数据硬编码到调用中，调用也不会更改）

以下是我在页面中嵌入的内容：

<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">

服务器代码：

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

---

工作起来很有魅力

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

看看关于通过javascript发布文件的另一个问题：

关于这个问题的答案是，你只能用flash来实现，但也有iframe的上传和发布选项

另外，还可以看看这一点，寻找替代解决方案：

---

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

看看关于通过javascript发布文件的另一个问题：

关于这个问题的答案是，你只能用flash来实现，但也有iframe的上传和发布选项

另外，还可以看看这一点，寻找替代解决方案：

---

当您从之前的onload函数返回时，您的ajax请求不会被发送。
您可以使用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);

reader.onload=（函数（文件）{
var data=new FormData（）；
data.append（'file'，theFile）；
$.ajax({
键入：“POST”，
processData:false，
contentType:false，
url:“/parse_opml”，
数据：数据，
成功：功能（详细信息、响应）{
console.log（'woo！'）；
},
错误：函数（数据、响应）{
console.log（'boooo'）；
}
});
返回函数（e）{
//打印文件的内容
var span=document.createElement（'span'）；
span.innerHTML=[''，e.target.result'
'].join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；

当您从之前的onload函数返回时，您的ajax请求不会被发送。
您可以使用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);

reader.onload=（函数（文件）{
var data=new FormData（）；
data.append（'file'，theFile）；
$.ajax({
键入：“POST”，
processData:false，
contentType:false，
url:“/parse_opml”，
数据：数据，
成功：功能（详细信息、响应）{
console.log（'woo！'）；
},
错误：函数（数据、响应）{
console.log（'boooo'）；
}
});
返回函数（e）{
//打印文件的内容
var span=document.createElement（'span'）；
span.innerHTML=[''，e.target.result'
'].join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；