16

JQuery Mobileを使用して小さなモバイル Web アプリケーションを構築しています。次に、電話で画像を選択してその情報を取得し、後でアプリからアップロードできるようにします。これはまったく可能ですか？

オフラインの場合でも、アップロードしたい画像を選択できるはずです。

4

1 に答える 1

31

ターゲットの電話のブラウザがファイル アップロードの入力タイプとFileAPI (iOS 6.0 Safari など)をサポートしている場合

<input type="file"  name="image" accept="image/*" capture>

次に、ユーザーに既存のファイルを選択させたり、カメラを使用して写真を撮らせたり、画像ファイルの属性 (ファイル名、サイズ、タイプ、変更日) を読み取らせたりすることができます。

$("input[type=file]").change(function(){
    var file = $("input[type=file]")[0].files[0];
    alert(file.name + "\n" +
          file.type + "\n" + 
          file.size + "\n" + 
          file.lastModifiedDate);
});

を使用して、選択したファイルのプレビューを作成することもできますFileReader。

<div id="preview"></div>

displayAsImage3(file, "preview");

function displayAsImage3(file, containerid) {
    if (typeof FileReader !== "undefined") {
        var container = document.getElementById(containerid),
            img = document.createElement("img"),
            reader;
        container.appendChild(img);
        reader = new FileReader();
        reader.onload = (function (theImg) {
            return function (evt) {
                theImg.src = evt.target.result;
            };
        }(img));
        reader.readAsDataURL(file);
    }
}

ここではjsFiddleが動作しています

于 2013-03-03T08:16:13.160 に答える