使用按钮将图像和文本添加到网页

Question

所以我要为一个朋友创建一个网站，他们希望能够将图像添加到该网站上，而无需我手动输入并通过我的编译器将它们放到网站上。谁能告诉我如何将这样的代码放入我的代码中。我在网上到处都是，找不到任何东西！

Answer 1

好的，您需要告诉我们此网站使用的是哪些技术（php，django，ruby on rails或CMS，如wordpress，joomla等），请不要忘记遵循以下准则：

https://stackoverflow.com/help/mcve

无论如何，您的问题是用javascript标记的，如果您在使用nodejs的后端中使用js，则有一个模块可以帮助您称为“可塑”

安装

npm install formidable

包含在您的应用程序中

var formidable = require('formidable')

第1步：创建一个上传表单

创建一个编写HTML表单并带有上载字段的Node.js文件：

var http = require('http');

http.createServer(function (req, res) {
  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);

第2步：解析上传的文件

包括“强大”模块，以便一旦上传的文件到达服务器后就能够对其进行解析。

文件上传并解析后，会被放置在计算机上的临时文件夹中。

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

第3步：保存文件

文件成功上传到服务器后，会放置在一个临时文件夹中。

此目录的路径可以在“文件”对象中找到，作为parse（）方法的回调函数中的第三个参数传递。

要将文件移动到您选择的文件夹，请使用“文件系统”模块，然后重命名文件：

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

http.createServer(function (req, res) {
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      var oldpath = files.filetoupload.path;
      var newpath = 'C:/Users/Your Name/' + files.filetoupload.name;
      fs.rename(oldpath, newpath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        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);