Monacaというか、Cordovaで、INPUTタグでTypeをfileにして、
そこから画像ファイルをスマホ端末に表示する例はいっぱい
あるけど、
スマホ端末にあるファイルのファイル名から、画像ファイルを
どうやって表示するかについては書いてなかったのでメモメモ
以下のようなかんじ。
fnameを他のファイル名に変えれば、そのファイルがでる。
INPUTタグでTypeをfileにした場合、その0番目をとってくれば、
Fileオブジェクトが取れるので簡単なんだけど、
名前から、そのFileオブジェクトを、どうやってFileAPIで作るか
が問題（window.resolveLocalFileSystemURLで、FileEntryを取得し、
そこからFileオブジェクトを取り出す）
【参考サイト】
http://ja.stackoverflow.com/questions/10645/%E7%AB%AF%E6%9C%AB%E3%81%AE%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
http://stackoverflow.com/questions/21980112/cordova-resolvelocalfilesystemurl-success-call-back-failing-on-ios
http://blog.asial.co.jp/1079
そこから画像ファイルをスマホ端末に表示する例はいっぱい
あるけど、
スマホ端末にあるファイルのファイル名から、画像ファイルを
どうやって表示するかについては書いてなかったのでメモメモ
以下のようなかんじ。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<script>
function myfunc() {
var fname = "file:///storage/sdcard0/DCIM/Camera/1439791690213.jpg";
var errorHandler = function(e){
alert("error");
console.debug(e);
};
window.resolveLocalFileSystemURL(fname, function(fileEntry){
fileEntry.file(function(file){
var fileReader = new FileReader();
fileReader.onload = function(event) {
$("#myimg").attr('src', event.target.result);
};
fileReader.onerror = function(event) {
alert(event.toString());
};
fileReader.readAsDataURL(file);
}, errorHandler);
});
}
</script>
</head>
<body>
<img id="myimg" src="" width="150" height="250"/>
画像
<button id="retBtn" onclick="myfunc();">表示</button>
</body>
</html>
|
fnameを他のファイル名に変えれば、そのファイルがでる。
INPUTタグでTypeをfileにした場合、その0番目をとってくれば、
Fileオブジェクトが取れるので簡単なんだけど、
名前から、そのFileオブジェクトを、どうやってFileAPIで作るか
が問題（window.resolveLocalFileSystemURLで、FileEntryを取得し、
そこからFileオブジェクトを取り出す）
【参考サイト】
http://ja.stackoverflow.com/questions/10645/%E7%AB%AF%E6%9C%AB%E3%81%AE%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
http://stackoverflow.com/questions/21980112/cordova-resolvelocalfilesystemurl-success-call-back-failing-on-ios
http://blog.asial.co.jp/1079
アクセス
トータル
ランキング
