Question

我是node.js的新手，我试图通过拖放操作上传文件，

我首先创建了一个简单的上传器（没有拖放操作）

就像这样，它起作用了：

    var http = require('http');
var formidable = require('formidable');

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      res.write('File uploaded');
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(8080);

当我转到http://localhost:8080/时，我可以看到上传器，并且一切正常。

现在，我尝试通过拖放操作使用dropzone进行上传，而不是使用它进行简单的上传，但是我不知道如何使它工作

var http = require('http');
var formidable = require('formidable');

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      res.write('File uploaded');
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});

    res.write('<html><head><title>Dropzone </title><link href="dropzone.css" rel="stylesheet"></head><body><form method="post" action="/fileupload" id="uploader" enctype="multipart/form-data"><input name="file" type="file" multiple /><button>Save</button></form><script src="dropzone.js"></script></body></html>');

    return res.end();
  }
}).listen(8080);

现在，当我运行$ node my-file.js并转到localhost：8080 /时，我看到的是正常的上传器，而不是dropzone上传器。

如果有人能帮助我解决这个问题，我将不胜感激...

预先感谢

Answer 1

您的HTML说：

<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>

但是服务器端JavaScript的逻辑是：

如果URL为<?= htmlentities($comment) ?>，则处理表单数据，否则向浏览器发送HTML页面。

因此，当浏览器请求JavaScript文件时，您将为其提供一个HTML页面。

您需要编写代码来实现浏览器的实际要求。

（提示：您的<script src="dropzone.js"></script>应该是生成/fileupload错误页面的代码。仅为应该包含实际内容的URL生成实际内容）。

Answer 2

出现简单的上传，是因为您需要在表单中包括“ dropzone”类以显示样式。

 res.write('<html><head><title>Dropzone </title><link href="http://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/css/basic.css" rel="stylesheet"></head><body><form method="post" action="/fileupload"   class="dropzone" id="uploader" enctype="multipart/form-data"><button>Save</button></form><script src="http://cdnjs.cloudflare.com/ajax/libs/dropzone/3.8.4/dropzone.js"></script></body></html>');

将dropzone与node.js一起使用

2 个答案: