在javascript中添加查询表单和图像
我是Javascript新手。我想显示一个简单的表单，以及顶部的图像，并在提交时发送参数。表单本身运行良好，但我找不到在顶部显示图片的方法。。应该非常简单吗？ 这是我的密码：在javascript中添加查询表单和图像,javascript,html,image,Javascript,Html,Image,我是Javascript新手。我想显示一个简单的表单，以及顶部的图像，并在提交时发送参数。表单本身运行良好，但我找不到在顶部显示图片的方法。。应该非常简单吗？ 这是我的密码： var https = require('https'); var fs = require('fs') var path = require('path') url = require('url'); var qs = require("querystring"); var StringBuilder = requir
var https = require('https');
var fs = require('fs')
var path = require('path')
url = require('url');
var qs = require("querystring");
var StringBuilder = require("stringbuilder");
const port = Number(process.env.PORT || 9000);
function getCalcHtml(req, resp, data) {
var sb = new StringBuilder({ newline: "\r\n" });
sb.appendLine("<html>");
sb.appendLine(" <body>");
// sb.appendLine(img);
sb.appendLine(" <img src=\"./myimage.jpeg\" height=\"100\" width=\"100\">"); // NOT WORKING, shows an empty square
sb.appendLine(" <form method='post'>");
sb.appendLine(" <table>");
sb.appendLine(" <tr>");
sb.appendLine(" <td>Serial Number: </td>");
if (data && data.txtFirstNo) {
sb.appendLine(" <td><input type='text' id='txtFirstNo' name='txtFirstNo' value='{0}'/></td>", data.txtFirstNo);
}
else {
sb.appendLine(" <td><input type='text' id='txtFirstNo' name='txtFirstNo' /></td>");
}
sb.appendLine(" </tr>");
sb.appendLine(" <tr>");
sb.appendLine(" <td> level: </td>");
if (data && data.txtSecondNo) {
sb.appendLine(" <td><input type='text' id='txtSecondNo' name='txtSecondNo' value='{0}'/></td>", data.txtSecondNo);
}
else {
sb.appendLine(" <td><input type='text' id='txtSecondNo' name='txtSecondNo' /></td>");
}
sb.appendLine(" </tr>");
sb.appendLine(" <tr>");
sb.appendLine(" <td><input type='submit' value='Submit value' /></td>");
sb.appendLine(" </tr>");
sb.appendLine(" </table>");
sb.appendLine(" </form>")
sb.appendLine(" </body>");
sb.appendLine("</html>");
sb.build(function (err, result) {
resp.write(result);
resp.end();
});
}
function getCalcForm(req, resp, data) {
resp.writeHead(200, { "Content-Type": "image/gif" });
getCalcHtml(req, resp, data);
// NOT WORKING
// var img = fs.readFileSync('./myimage.jpeg');
// resp.writeHead(200, {'Content-Type': 'image/gif' });
// resp.end(img, 'binary');
}
function post(req, resp, data) {
resp.writeHead(200, { "Content-Type": "text/html" });
//getCalcHtml(req, resp, data);
// do a POST request
// create the JSON object
jsonObject = JSON.stringify({
"SerialNumber": data.txtFirstNo.toString(),
"Joints" : 45
});
// do the POST call
// works fine
// etc
}
function getHome(req, resp) {
resp.writeHead(200, { "Content-Type": "text/html" });
resp.write("<html><html><head><title>Home</title></head><body>Test Form Click <a href='/calc'>here</a></body></html>");
resp.end();
}
function get404(req, resp) {
resp.writeHead(404, "Resource Not Found", { "Content-Type": "text/html" });
resp.write("<html><html><head><title>404</title></head><body>404: Resource not found. Go to <a href='/'>Home</a></body></html>");
resp.end();
}
http.createServer(function (req, resp) {
switch (req.method) {
case "GET":
if (req.url === "/") {
getHome(req, resp);
}
else if (req.url === "/calc") {
getCalcForm(req, resp);
}
else {
get404(req, resp);
}
break;
case "POST":
if (req.url === "/calc") {
var reqBody = '';
req.on('data', function (data) {
reqBody += data;
if (reqBody.length > 1e7) { //10MB
resp.writeHead(413, 'Request Entity Too Large', { 'Content-Type': 'text/html' });
resp.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
}
});
req.on('end', function () {
var formData = qs.parse(reqBody);
getCalcForm(req, resp, formData);
Post(req,resp,formData);
});
}
else {
get404(req, resp);
}
break;
default:
get405(req, resp);
break;
}
}).listen(port);
var https=require（'https'）；
var fs=require（'fs'）
var path=require（'路径'）
url=require（'url'）；
var qs=要求（“查询字符串”）；
var StringBuilder=require（“StringBuilder”）；
const port=编号（process.env.port | | 9000）；
函数getCalcHtml（请求、响应、数据）{
var sb=新的StringBuilder（{newline:“\r\n”}）；
某人加上一行（“”）；
某人加上一行（“”）；
//sb.附录（img）；
sb.appendLine（“”；//不工作，显示一个空正方形
某人加上一行（“”）；
某人加上一行（“”）；
某人加上一行（“”）；
sb.附录行（“序列号：”）；
if（data&&data.txtFirstNo）{
sb.appendLine（“”，data.txtFirstNo）；
}
否则{
某人加上一行（“”）；
}
某人加上一行（“”）；
某人加上一行（“”）；
某人的副词（“级别：”）；
if（data&&data.txtSecondNo）{
sb.appendLine（“”，data.txtSecondNo）；
}
否则{
某人加上一行（“”）；
}
某人加上一行（“”）；
某人加上一行（“”）；
某人加上一行（“”）；
某人加上一行（“”）；
某人加上一行（“”）；
某人加上一行（“”）
某人加上一行（“”）；
某人加上一行（“”）；
某人构建（功能（错误、结果）{
分别写入（结果）；
分别结束（）；
});
}
函数getCalcForm（请求、响应、数据）{
分别写头（200，{“内容类型”：“image/gif”}）；
getCalcHtml（请求、响应、数据）；
//不起作用
//var img=fs.readFileSync（'./myimage.jpeg'）；
//分别写头（200，{'Content-Type'：'image/gif'}）；
//分别结束（img，“二进制”）；
}
功能post（请求、响应、数据）{
分别写头（200，{“内容类型”：“text/html”}）；
//getCalcHtml（请求、响应、数据）；
//发邮件请求
//创建JSON对象
jsonObject=JSON.stringify({
“SerialNumber”：data.txtFirstNo.toString（），
“关节”：45
});
//投递电话
//很好
//等
}
函数getHome（请求、响应）{
分别写头（200，{“内容类型”：“text/html”}）；
分别编写（“家庭测试表格点击”）；
分别结束（）；
}
功能get404（请求、响应）{
响应写头（404，“未找到资源”，{“内容类型”：“text/html”}）；
分别写入（“404404：未找到资源。转到”）；
分别结束（）；
}
http.createServer（函数（req，resp）{
开关（请求方法）{
案例“GET”：
如果（请求url==“/”）{
回家（请求、响应）；
}
否则如果（req.url==“/calc”）{
getCalcForm（请求、响应）；
}
否则{
get404（请求、响应）；
}
打破
案例“职位”：
如果（请求url==“/calc”）{
var reqBody=''；
请求开启（“数据”，功能（数据）{
reqBody+=数据；
如果（reqBody.length>1e7）{//10MB
响应写头（413，‘请求实体太大’，{‘内容类型’：‘text/html’}）；
分别结束（'413413:请求实体太大'）；
}
});
请求开启（'end'，函数（）{
var formData=qs.parse（reqBody）；
getCalcForm（请求、响应、表单数据）；
Post（请求、响应、表单数据）；
});
}
否则{
get404（请求、响应）；
}
打破
违约：
get405（请求、响应）；
打破
}
}).监听（端口）；
很抱歉，我现在无法自己测试，但另一个问题可能是这个StringBuilder如何处理斜杠，请验证是否需要转义此字符。在浏览器中的inspector中，您是否看到img行？您确定当前目录是您想要的目录吗，并且图像文件存在于目录中？向
alt