0

我有一个非常简单的网页，允许用户从他们的操作系统中选择一个文件并“提交”到运行 node.js 的服务器。

我现在正在更新前端以使用 jQuery，以便我可以将用户保持在同一页面上，然后对服务器的响应做一些有用的事情。

我已经按照这里的答案添加了 jQuery 代码，但是这样做改变了服务器实际查找（和使用）传递文件的能力。

在发布文件时我需要添加一些特定的东西吗？

相关HTML：

<form id="upload" enctype="multipart/form-data" 
  action="http://localhost:3000/file_upload" method ="post">
        <div>
            <label for="pickedFile">Upload CSV: </label><input type="file" name="pickedfile" id = "pickedfile"/>
        </div>

        <div>
            <button>Send the file</button>
        </div>
</form>
<script src="js/app.js"></script>

相关的 app.js 片段如下：

// site/js/app.js

var app = app || {};

(function($){


})(jQuery);

$(function(){
  $("form").submit(function(){
    $.post($(this).attr("action"), $(this).serialize(), function(jsonData){
      console.log(jsonData);
    }, "json");
    return false;
  });
});

相关服务器片段如下：

var app = express();

//need to configure this before setting up the routes
//if you want file passing to work correctly
app.configure(function(){
  app.use(express.bodyParser());
  app.use(app.router);
});
app.post('/file_upload', function(req, res) {
    //file should be in req.files.pickedfile

    // get the temporary location of the file
    // When using jquery, pickedfile is undefined!
    var tmp_path = req.files.pickedfile.path;
 });
4

1 回答 1

1

您的 Express 部分似乎很好，但是 jQuery 代码需要一个像 jQuery.Form这样的插件来处理多部分表单提交：

$("form").ajaxForm({
  data: {
    extraParam: "foobar"
  },
  error: function() {
    alert("Uh oh, something went wrong");
  },
  success: function( response ) {
    alert("Upload completed!");
    console.log( response );
  }
});
于 2013-08-20T22:09:24.133 回答