Q&A
> で変換できますが、変換したいパスは一重のバックスラッシュで区切ってあるので正しく変換できません。
試してみました? それでできそうですよ。
バックスラッシュで区切られたパスをスラッシュで区切られたパスに変換したいです。
JavaScriptとHTMLで画像のローカルパスを取得してそのローカルパスをもとに画像を表示させたいのですが、
取得したパスはバックスラッシュでディレクトリーを区切ってあります。
html
1"C:\Users\name\Desktop\picture.png"
html の background = "画像のパス" で画像を表示する方法ならバックスラッシュのローカルパスでも表示可能なのですが
css の background-image や canvas で画像を表示する際は ローカルファイルの場合 file:/// をパスに加えたうえ、
バックスラッシュをスラッシュにしたパスじゃないと表示されないようです。
そのためバックスラッシュのパスをスラッシュに変換したいです。
ほかのteratailの記事などで、.replace() を使って変換している例を見つけたのですが、
https://teratail.com/questions/119708
上の記事の場合
html
1var path = "fuga\hoge\pily.png"
などの二重のバックスラッシュで区切ってあるので
html
1var replaced = path.replace(/\/g, "/");
で変換できますが、変換したいパスは一重のバックスラッシュで区切ってあるので正しく変換できません。
html
1var replaced = path.replace(//g, "/");
このコードだとバックスラッシュが普通の文字列としてではなくエスケープシーケンス？というものとして扱われるらしくエラーになってしまいます。
どうすればバックスラッシュで区切られたパスをJavascriptでスラッシュに変換できるでしょうか？
またバックスラッシュのローカルパスでも html の background="画像のパス" では使用できるため <body> などの要素に
JavaScriptからbackground="画像のパス"を追加したりできないでしょうか？
パスを取得するコード
以下のサイトのコードです。
http://javascript.pc-users.net/browser/form/file.html
取得したパスがバックスラッシュのローカルパスのため
net::ERR_FILE_NOT_FOUND になってしまいます。
html
1<html> 2 <head> 3 <title>JavaScript file</title> 4 <script type="text/javascript"> 5 function dispFile(){ 6 var filePath = document.fm.upFile.value; 7 console.log(filePath) 8 alert('選択したファイルのパスは' + filePath + 'です' ); 9 let body = document.getElementById("bodyId") 10 body.setAttribute("style","background-image:url('file:///"+filePath+"')") 11 12 } 13 </script> 14 </head> 15 <body id = "bodyId"> 16 <form name="fm"> 17 選択したファイルのパスを表示<br> 18 <input type="file" name="upFile" value="upFile"><br> 19 <input type="button" value="確認" onclick="dispFile()"> 20 </form> 21 </body> 22 </html>
回答よろしくお願いします！
>> var path = "fuga\\hoge\\pily.png"
これは二重バックスラッシュではありません。
\\ で１文字のバックスラッシュを表しています。
> var replaced = path.replace(/\\/g, "/");
これも同様です。
一重のスラッシュで区切った
```html
"C:\Users\name\Desktop\picture.png"
```
を変換すると
のパスを
```html
var replaced = path.replace(/\\/g, "/");
```
で変換するとスラッシュがすべて消えて
C:Users
ameDesktoppicture.png
になってしまいます。
また、
```html
var replaced = path.replace(/\/g, "/");
```
で変換すると
Uncaught SyntaxError: missing ) after argument listとなり
```html
var replaced = path.replace(/\/g, "/");
```
のコードのバックスラッシュがエスケープシーケンスとして認識されるためエラーになってしまいます。
var replaced = path.replace(/\\/g, "/");
で、動作しています。
ただし、
> 疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するため、文字列には C:\fakepath\ の接頭辞が付きます
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#value
GET file:///C:/fakepath/error1k.png net::ERR_FILE_NOT_FOUND
皆さん返信ありがとうございます。
var replaced = path.replace(/\\/g, "/");
は動作したのですが、Lhankor_Mhyさんのいうようにfakepathが追加されたためエラーになったのですか？
> fakepathが追加されたためエラーになったのですか？
そうでしょうね。<input type=file>のファイルからローカルのパスを正確に知ることは不可能です。そのファイルをHTML/CSS内で画像として扱う方法は、調べれば見つけられると思います。
回答4件
0
ベストアンサー
やりたいことは、こういうことだと思います。
js
1 function dispFile() { 2 let body = document.getElementById("bodyId") 3 body.setAttribute("style", "background-image:url('" + URL.createObjectURL(new FormData(document.getElementsByName('fm')[0]).get('upFile')) + "')") 4 }
投稿2021/10/06 05:35
総合スコア36960
回答ありがとうございます！
無事完璧に動作しました！！
途中あきらめかけてたんですが、本当に助かりました！！
ほとんどそのまんまになりますがコード全体は下のようになりました。
<html>
<head>
<title>JavaScript file</title>
<script type="text/javascript">
function displayFile() {
let body = document.getElementById("bodyId")//body要素をid="bodyId"から取得する
body.setAttribute("style", "background-image:url('" + URL.createObjectURL(new FormData(document.getElementsByName('formName')[0]).get('upFileName')) + "')")
}
</script>
</head>
<body id = "bodyId">
<form name="formName">
選択した画像を表示<br>
<input type="file" name="upFileName" value="画像を選択"><br>
<input type="button" value="画像の表示" onclick="displayFile()">
</form>
</body>
</html>
お役に立てたようで何よりです。
エスケープについては、リテラルで書く時にしか影響しない、と理解されるとわかりやすいと思います。
JavaScript の内部の実体としては、エスケープ文字もなにもないです。
0
下記ページを上から下まで熟読してください。
投稿2021/10/06 05:19
総合スコア8402
0
一重のスラッシュで区切った
"C:\Users\name\Desktop\picture.png"とソースコードに書いた時点で、それはC:Users（改行）ameDesktoppicture.pngという意味になってしまいます。
最初から1重のバックスラッシュ区切りで書くことが間違っているので、どうしようもありません。
投稿2021/10/06 05:19
編集2021/10/06 05:24
総合スコア146018
揚げ足取りで申し訳ありませんが、文中のスラッシュはバックスラッシュですね。
> 揚げ足取りで申し訳ありませんが、文中のスラッシュはバックスラッシュですね。
質問文の方に引っ張られてしまいました。
> 取得したパスがバックスラッシュのローカルパスのため
net::ERR_FILE_NOT_FOUND になってしまいます。
こちらも、「ファイル名から取得する」方法が間違っています（ブラウザ内から、アップロードされたファイルのパスは基本的に取れません）。objectURLを起こすなどの方法で対応してください。
回答ありがとうございます！maisumakunさんのobjectURLを起こすなどの方法は
Lhankor_MhyさんがいっていたURL.createObjectURL()を使う方法だったんですね！
0
"C:\Users\name\Desktop\picture.png"
スラッシュはエスケープ用の文字なので上記では文字列が成立しません
javascript
1var str='C:\Users\name\Desktop\picture.png'; 2console.log(str.replace(/\/g,'/'));
投稿2021/10/06 05:12
総合スコア116724
バックスラッシュは、ですね。
あと、文字列が成立しないのではなくて、\U はただのUになるだけですね。
回答ありがとうございます！今回でyamabejpさんがいうように\などのエスケープシーケンスが文字列にまざっているとエラーになることがわかりました。
ずっと改行の\nの\が何か知らずに使ってました。
あなたの回答
tips
プレビュー
