実現したいこと
HTMLのフォームで添付されたファイルをローカルの別フォルダ又はOneDrive等のクラウドストレージに保存する方法はありますでしょうか。
Webサーバーを立てるのは面倒なので、Webサーバーを使わない方法を教えて頂きたいです。
HTMLの送信ボタンを押したときにイベントを発火させたいです。
前提
① ファイル構成
-html: フォームの入力・送信を行う
-javascript: フォームに添付された画像のプレビューなど
*自分は .jsにファイルを保存するためのプログラムを書く必要があるという認識です。
該当のソースコード
html
1<!doctype html>2<html lang="en-US">3<head>4 <meta charset="utf-8" />5 <title>TestForm</title>6 <link rel="stylesheet" href="C:design.css"> 7 <script type="text/javascript" src="test.js"></script>8</head>9<body>10 <p class="lead-form">TestForm</p>11 <form>12 <div class="item">13 <p class="label">picture</p>14 <div input class="inputs"> 15 <input type="file" name="before_kaizen" onchange="preview(this)" multiple> 16 <div class="preview"></div>17 <figure id="image0" style="display: none">18 <figcaption>Before Kaizen</figcaption>19 <img src="" alt="" id="img0" style="max-width: 100%">20 </figure>21 </div>22 </div> 23 <div class="btn-area"> 24 <input type ="button" onclick="hoge()" value="Submit"> 25 </div> 26 </form>27</body>28</html>
javascript
1function preview(elem) {2 const file = elem.files[0]3 const image = (file) ? `<img src=${URL.createObjectURL(file)}>` : '' 4 elem.nextElementSibling.innerHTML = image 5}6
試したこと
・様々なサイトで調べましたが、まったくと言っていいほど情報がなく、途方に暮れています
0 コメント