Q&A
当方の環境では、②が動作しました。
ご提示いただいていない部分に原因があると思われます。
前提・実現したいこと
HTMLとjavascriptを使用して音楽アーティストのプロフィールを作成するシステムを作っています。
プロフィール写真のファイルを選択したと同時にHTML上に画面に移したいのですが、試行錯誤してもうまくいきません。
発生している問題・エラーメッセージ
該当のソースコード
※どちらもうまくいっていません
方法①
html
1<input type="file" id="Artist" onclick="showMessage()" accept="image/*" value="アーティスト写真"/> 2<img id="output-message">
javascript
1const showMessage = () => { 2const textbox = document.getElementById("Artist"); 3const inputValue = textbox.value; 4const output = inputValue; 5document.getElementById("output-message").innerHTML = output; 6}
方法②
html
1<input type="file" id="Artist" accept="image/*"> 2<img id="output-message">
javascript
1$('#Artist').on('change', function (e) { 2 var reader = new FileReader(); 3 reader.onload = function (e) { 4 $("#output-message").attr('src', e.target.result); 5 } 6 reader.readAsDataURL(e.target.files[0]); 7});
試したこと
２つの方法で試しましたがうまくいきませんでした。
dom操作を使ってhtmlに反映させることは理解しましたが、具体的に実行はできなかったです。
補足情報（FW/ツールのバージョンなど）
htmlの前半部分を提示させていただきます。
ここに原因はありますでしょうか？
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>アーティストプロフィール</title>
<script src="index.js" defer></script>
</head>
<body>
<header class="header">
<div class="container">
<div class="header-logo">PLOFILE</div>
</div>
</header>
<main class="page1">
<div class="container">
<div class="self-pr">
<input class="pr" type="text" value="キャッチコピー">
</div>
<div class="artist-photo">
<!--<input type="file" id="Artist" onclick="showMessage()" accept="image/*" value="アーティスト写真"/>-->
<!--<img id="output-message">-->
<input type="file" id="Artist" accept="image/*">
<img id="output-message">
</div>
<div class="artist-name">
<input class="name" type="text" value="アーティスト名">
</div>
</div>
```
jQuery はどこで読み込んでいますか？
すいません、jQueryを理解していません。
jQueryを読み込む必要があるということでしょうか？
もしそうであれば、読み込むべき場所も教えていただきたいです。
ご提示のjQueryを使っているスクリプトの前に読み込む必要があります。
head内でいいと思いますよ。
選択した画像を表示させたとしてそれはその場だけであって情報が保存されるわけではないのですけど、そこは問題ないのでしょうか。
<script src="jquery.min.js" type="text/javascript"></script>
このような書き方でよろしいでしょうか？
そして、jQueryを使用する場合はjquery.min.jsにどういったコーディングを行えばよろしいでしょうか？
jQueryはライブラリでいわば機能詰め合わせの大きな関数群なので、そのファイルに書く必要はないです。
jQueryの機能を使うためにjQuery本体を読み込む必要があります。
２は機能を使っているために本体の読み込みが必要。
いずれにしてもエラー確認はしてください。ブラウザ開発ツールのコンソール。
「jQuery 読み込み方」でググるといろいろ出ます。
コピペで済むものもありますよ。
エラー３つございました
①
index.html:9 GET https://0a0d2a89edb54cb3a49175bf20daf375.vfs.cloud9.ap-northeast-1.amazonaws.com/_static/Artist%20Profile/cover/jquery.min.js net::ERR_ABORTED 404
9行目
<script src="jquery.min.js" type="text/javascript"></script>
この行に問題があるようです。
②
index.js:11 Uncaught ReferenceError: $ is not defined at index.js:11
(anonymous) @ index.js:11
11行目
$('#Artist').on('change', function (e) {
この行に問題があるようです
③
favicon.ico:1 GET https://0a0d2a89edb54cb3a49175bf20daf375.vfs.cloud9.ap-northeast-1.amazonaws.com/favicon.ico 503
これはさっぱりわかりません。。。
何度もご質問申し訳ございません。
m.ts10806さん
確かに表示した画像を含めてプロフィールをpdf等にまとめて保存させたりしたいです。この場合、違ったアプローチが必要でしょうか？
③は気にしなくていいです。
①②はjQueryを正しく読み込めば解消されるでしょう。
404で調べればわかります。
faviconはほっといても良いでしょうけど気になるなら然るべきところにファイルをおいて対応。
jQuery本体は何かない限り、インターネットアクセス可能なクライアントからのアクセス前提ならCDN使うので良いですよ。
そうでないなら、ダウンロードしてきた本体を読み込める場所に配置してください。いわゆる外部リソース（外部jsファイル）へのリンクです。
>保存させたりしたいです。
データベースの操作が可能なサーバーサイドの言語が必要です。PHP,Javaなど。
①はjQueryのファイルを作ることで解決できました。
②についてですが、この場合の$の変数を定義するにはどのようなコーディングが必要でしょうか？
データベースが必要なんですね。。。
保存といってもネット上のサーバーに残しておく必要はなく、ユーザーだけが自身のサーバーに保存できれば大丈夫です。それでもデータベースの操作が必要でしょうか？
作る必要ないです。ここまでのコメントがあまり理解されてないように思われます。
公式からダウンロードするかCDNで直接かで外部JSとしてリンクしてください。
jQueryというライブラリで定義されるので、自分で作るものではないです。
まずは一度「jQueryとは」から調べておさえてください。
>ユーザーだけが自身のサーバーに
「サーバーに」の時点で必要です。
そもそも「ユーザー」とは何を意識していますか？不特定多数ですか？
要件が見えないのでどこまで何が必要かは判断できません。
「音楽アーティストのプロフィールを作成する」という時点で、アーティスト情報とファイルなり画像なり紐づける必要があるのでDBにデータを保存するのが妥当だと判断しましたが、「ユーザー」がどういうものか不明なので、何とも言えない部分はあります（いずれにしてもサーバーサイドの言語は必要。サーバーにデータを保存するわけですから。DB採用が妥当かどうかは次の話）
> ②についてですが、この場合の$の変数を定義するにはどのようなコーディングが必要でしょうか？
不要です。
読み込めば、$は定義されます。
1度jQueryについて 1通り調べてみます。
ありがとうございます。
「ユーザー」とは不特定多数を指していました。
こちらで情報を管理する必要はないためデータベースは不要と考えていましたが、
個人が個人のパソコン等に保存する時点でデータベースが必要なのですね。
回答1件
0
自己解決
html
1<input type="file" id="Artist" accept="image/*"> 2<img class="photo" id="output-message1">
javascript
1$('#Artist').on('change', function (e) { 2 var reader = new FileReader(); 3 reader.onload = function (e) { 4 $("#output-message1").attr('src', e.target.result); 5 } 6 reader.readAsDataURL(e.target.files[0]); 7});
投稿2021/07/11 02:30
総合スコア2
あなたの回答
tips
プレビュー
