質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

Ajax通信を利用したファイルアップロードができない

Azel_T3T
Azeeeel

総合スコア76

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

2回答

0評価

0クリップ

321閲覧

投稿2022/04/18 01:09

Ajax通信を利用したファイルアップロードができない

https://symfoware.blog.fc2.com/?no=2565
こちらの記事を参考にファイルアップロードの仕組みを作りました。
ローカル環境では無事にプロジェクトファイル直下にファイルが作成されたのですが、herokuにデプロイした後に試してみたところプロジェクトファイル直下に書き込まれませんでした。何故でしょうか。
エラーが出ているわけではなく、正常に動いています。
何かわかる方いましたらご教授お願いいたします。

app.js(一部抜粋)

app.set('view engine', 'ejs'); app.use(express.raw({limit: '15mb'})); app.get('/connect', async (req, res) => { res.render('upload.ejs'); }); app.post('/upload', async (req, res) => { connection.query( 'SELECT id FROM tweets ORDER by id DESC limit 1;', (error, results) => { var logNo = results[0].id; console.log(logNo); fs.writeFileSync(logNo+'.kml', req.body); res.send('ok'); }); });

upload.ejs

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>ajax post</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <div> <label>kmlファイル選択:</label> <input accept="file*" id="image" type="file"> </div> <div> <button id="upload">アップロード</button> </div> <script> $(() => { const upload = (binaryData) => { $.ajax({ url: 'upload', type: 'POST', data: binaryData, processData: false, contentType: 'application/octet-stream' }).done((data) => { console.log('成功'); }).fail(() => { console.log('失敗'); }); }; $('#upload').on('click', () => { if (!$('#image').prop('files').length) { console.log('画像未選択'); return false; } const file = $('#image').prop('files').item(0); console.log(file.name); console.log(file.type); console.log(file.size); const reader = new FileReader(); reader.onloadend = () => { upload(reader.result); }; reader.readAsArrayBuffer(file); }); }); </script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/04/18 01:20

#uploadをクリックしたときにformに予め取り込んでおいた#imageの画像をアップロードする仕様でしょうか?
Azel_T3T

2022/04/18 01:35

upload.ejsの12行目で取り込み、15行目のボタンで送信をしています。 formがこのことを指していたら申し訳ありません。
Azel_T3T

2022/04/18 01:37

そもそもローカルファイルに保存すらされないので困ってます。 しかしそっちの対策も考えないとですね、情報ありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。