Q&A
<input type="file" name="zumen" id="efg">
に★★★.pdfを入れてアップロードする、という動作でしょうか？
それとも、<input type="file" name="zumen" id="efg"> はPDFとは関係のない部分ですか？
どうしても解決できないので、質問させてください。
submitの前に選択したPDF画像を表示して確認したいのですが、できません。
メタタグには下の様に記述していますし、jQuery.jsファイルの名前や場所も間違いありません。
画像を表示する部分は下のタグです。
<iframe height="200" src="img/☆☆☆.pdf" id="abc"></iframe>そして、画像を選択する部分は下のタグです。
<input type="file" name="zumen" id="efg"> <script> $('#efg').on('change',function(e) { $('#abc').attr('src', 'img/★★★.pdf'); }); </script>
何度見ても、これで間違いないと思うのですが、何故画像が表示されないのでしょう。
お分かりになる方がおりましたら、ご指導お願いいたします。
そもそもpdfは画像ではないですけど…
説明不足で申し訳ございません。
<script>
$('#zumen2').on('change',function(e) {
$('#samnail').attr('src', URL.createObjectURL(e.target.files[0]));
});
</script>
オブジェクトのＵＲＬ（ＰＤＦファイル）を取得して表示させようとしています。
<iframe height="200" src="img/☆☆☆.pdf" id="abc"></iframe>
の状態では☆☆☆.pdfは表示されます。
URL.createObjectURL(e.target.files[0])の部分をテストを兼ねて、★★★.pdfにして表示されるか
どうかを試したのですが、表示されませんでした。
mts10806さんがおっしゃる通り、pdfは画像ファイルではないので、
img要素で表示はできません。
phpなどの、サーバーサイドで、pdfを画像としてレスポンスを返すAPIを用意したりなどすればimg要素で表示できなくもないかと思いますが。
> miyabi_takatsukさん
質問はiframe要素ですよ？
img要素は出てきていません。
> tukino-hikariさん
★★★.pdf はアップロード前ですよね？
そうだとすると、同名のファイルがサーバにないと表示されないかと思いますが、そのようなファイルはありますか？
>Lhankor_Mhy
PDFファイルはサーバーに上げております。
なるほど。
そうすると、URL直打ちした場合はPDFが表示されるのですね？
>Lhankor_Mhy
はい！その通りです。
そこで、URL.createObjectURL(e.target.files[0])の部分を★★★.pdfと書き換えて試してみたのですが、表示されませんでした。
<script>
$('#efg').on('change',function(e) {
$('#abc').attr('src', 'img/★★★.pdf');
});
の部分に問題があるのは分かるのですが、何故なのかさっぱり分からずじまいです。
当方の環境で同じコードを書いてみましたが、再現しませんでした。
開発者ツールに何かエラーなどは出ていませんか？
NetWork タブでの応答はどうなっていますでしょうか？
ありがとうございます。
特に何もエラーは出ていません。
ただ、srcを書き換えるだけのコードなのに・・・＞＜。
NetWork タブでの応答はどうでしたか？
リクエストが飛んでいませんでしたか？
それとも、何らかのエラーで返ってきてますか？
NetWork タブというのが分からないので、ネットで調べてみます＞＜。
今、google clroameのデベロッパーツールを見ていますが、これで良いのでしょうか？
google clroameのデベロッパーツールのネットワークタブを表示しながら、動作確認しましたが、recording network activityと出たまま、何も録画されていませんでした。
確認ボタンをクリックすると、色々表示されますから、スクリプトが動いていないということですね。
とすると、リクエストが飛んでいないわけですね。
change イベント自体は動作しているのでしょうか？
コールバック関数に console.log() などを書いて確認されましたか？
「確認ボタン」とはなんでしょうか？
今作成しているのが、データ入力画面でＰＤＦファイルを選択した時に、どのＰＤＦファイルが選択されたかを目で見て分かるように横幅200px程度の枠に表示させようとしています。製品データですので、間違いが許されないので極力間違えた場合に気付きやすいようにということです。（確認画面でも、ＰＤＦファイルは表示されますが・・・。それは既に表示されるので問題ありません。）
確認ボタンとは、データ入力後にクリックするボタンで、それをクリックすると確認画面に推移します。
そこの部分は問題ありません。
var objectUrl = URL.createObjectURL( fileList[0] ) ;
console.log( objectUrl ) ;
これで、確認しましたけど、何も起こらず！です。
ん？
$('#abc').attr('src', 'img/★★★.pdf');
というコードで試しているのではなかったのですか？
$('#samnail').attr('src', URL.createObjectURL(e.target.files[0]));
★★★.pdfで試していたのですが、本当は上のコードです。
デベロッパーツールのconsoleのタブをクリックしましたら、下の様なエラーが表示されていました！
Uncaught SyntaxError: Invalid regular expression flags jQuery.js:1
パスをクォーテーションで囲むの忘れると正規表現と読まれることがありますね。
その辺では？
それは、既に試してみました＾＾。また、jQueryファイルに問題があるかもしれないと、再度別のjQueryファイルをダウンロードして試した見ました。何か、有るんですよね。これを何とか解決すれば、少しスキルが上がるかと思い、負けずに頑張る59歳のド素人です＾＾。
一週間かけるつもりで頑張ります＾＾。
公式のCDN使った方が紛れがないと思いますよ。
https://jquery.com/download/#using-jquery-with-a-cdn
ありがとうございます！
ヤッタ～～！((´∀｀))ｹﾗｹﾗ。
おすすめ頂いた、公式のＵＲＬを入れたら動きました＾＾。
問題はjQueryファイルにあったようです！
ありがとうございました！
解決です！
ご解決されて何よりです。
フォローさせていただきました！また、お世話になるかもしれませんが、その時はぜひよろしくお願いいたします！
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
回答1件
0
自己解決
submitをクリックする前に、選択したＰＤＦファイルを<iframe>で確認したかったのですが、下のスクリプトが動作しませんでした。
<iframe height="200" src="img/.pdf" id="samnail"> </iframe> <script> $('#zumen2').on('change',function(e) { $('#samnail').attr('src', URL.createObjectURL(e.target.files[0])); }); </script>
原因はjQueryファイルにあり、ご指摘いただいた正規のＵＲＬを利用しましたら無事に動作いたしました。
ご指摘いただいたＵＲＬは下記のＵＲＬです。
投稿2019/04/30 13:40
総合スコア26
あなたの回答
tips
プレビュー
