37783


html

[code]

    <textarea id="blogContentInputArea" class="form-control"></textarea>
    <input type="button" value="送信" onclick="blogContribution();" class="submitButton"/>
    
[/code]

javascript

[code]

    function blogContribution()
    {
        var content = $("#blogContentInputArea").val();
        $.post(`/blog/blogAdds`,{ content: content },
        (data) => {
    
        });
    }
    
[/code]

上記のように、テキストエリアと、送信ボタンの2つがあるhtmlを作成し  
javascriptファイルを読み込んで、jQueryでテキストエリアの内容をpostで送ろうと思っています。

htmlに1行追加して、ファイル選択画面を付け、  
テキストエリアの内容の送信と、ファイルの送信を同時に行いたいのですが  
どうすれば出来ますか？

[code]

    <textarea id="blogContentInputArea" class="form-control"></textarea>
    <input type="file" name="upfile" value="" class="fileuploader"/>
    <input type="button" value="送信" onclick="blogContribution();" class="submitButton"/>
    
[/code]

サーバ側では、Node.js + Expressを使用しています。


CC BY-SA 3.0
2017-09-05T11:00:47.940
37733
2017-09-08T05:57:18.110
22541
question
javascript html jquery node.js
jQueryでファイルを送信する方法について


form要素でラップしてsubmitする方法ではいかがでしょうか？  
enctype属性の指定をしてあげればアップロードできます。

[code]

    <form enctype="multipart/form-data" method="post" name="frm">
[/code]


CC BY-SA 3.0
2017-09-07T09:25:59.183
37781
2017-09-08T05:57:18.110
2017-09-08T05:57:18.110
2265
2265
37733
answer


もし、ajaxで`multipart/form-data`で送信したいという意味であれば `FormData` を利用して送信することが可能です。

[code]

    $(document.forms.someForm).submit(function(){
      $.ajax('/blog/blogAdds', {
        type: 'POST',
        data: new FormData(this),
        processData: false,
        contentType: false, 
      });
      return false;
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <form enctype="multipart/form-data" method="post" name="someForm">
      <textarea id="blogContentInputArea" class="form-control"></textarea>
      <input type="file" name="upfile" value="" class="fileuploader"/>
      <input type="submit" value="送信" class="submitButton"/>
    </form>
[/code]


CC BY-SA 3.0
2017-09-07T12:37:50.643
37783
2017-09-07T12:37:50.643
2376
37733
answer