javascriptの画像とともにクエリフォームを追加します。

私はJavaScriptを初めて使用しています。私は上の画像とともに、簡単なフォームを表示したいと思うし、送信時にパラメータを送信します。フォーム自体はうまく動作しますが、上に画像を表示する方法が見つかりません。シンプルにする必要がありますか？javascriptの画像とともにクエリフォームを追加します。

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

出典

2017-03-21 MattLieber

ブラウザのインスペクタで、img行が表示されますか？ – Mihai

現在のディレクトリが、そのディレクトリに存在することを意図したディレクトリであり、イメージファイルがディレクトリに存在していることを確認してください。 ''に 'alt'属性を追加すると、タグが整形式であるかどうかを知ることができ、見つかったファイルの質問に答えることができます。 – Isaiah

これで、「リソースを読み込めませんでした：サーバが検査員のステータス404で応答しました」というメッセージが表示されるようになりました。私のコードは今：sb.appendLine（ " alt = \" image \ ""）; 「イメージ」をテキストとして表示します。 JSコードはmyimage.jpegと同じディレクトリにあります。アイデアが不足しています。 – MattLieber

おそらく、imgタグが閉じていないので：はここに私のコードです。 imgタグを閉じる前にスラッシュを入力する必要がある場合は、imgタグを閉じる前にスラッシュを入力してください。<img src =... />

申し訳ありませんが、自分でテストすることはできませんが、このStringBuilderでスラッシュこの文字をエスケープする必要があるかどうかを確認します。

出典

2017-03-21 20:10:17

答えに感謝します。残念ながら、イメージタグ（良い呼び出し）を閉じることは違いを生み出すようには見えません。この文字をエスケープする必要はありません。 – MattLieber

javascriptの画像とともにクエリフォームを追加します。

答えて

関連する問題