web-dev-qa-db-ja.com

html5 <input type = "file" accept = "image / *" capture = "camera">「ファイルを選択」ボタンではなく画像として表示

私はhtml 5 <input type="file" accept="image/*" capture="camera">を使用して、webappから写真を撮り、phpを使用してデータベースに画像をアップロードすることを検討してきました。これは現在正常に機能しています。

ただし、「写真を撮る」オプションを表示するために見つけることができる唯一の方法は、「ファイルを選択」と呼ばれるボタンを持つテキストフィールドを使用することです。

既存の画像をクリックして写真の撮影オプションを開き、ユーザーが写真を撮影/ファイル選択した後、既存の写真の代わりに新しい画像を表示する方法はありますか？その後、画像を保存してよければ、「アップロード」ボタンをクリックする必要があります。

ここでJSフィドルを参照してください、うまくいけば、これはいくつかの意味があります！ http://jsfiddle.net/6dxGY/

phphtmlhtml5
37
Janey

これにはJavascript Filereaderを使用する必要があります。 （filereader-apiの概要： http://www.html5rocks.com/en/tutorials/file/dndfiles/ ）

ユーザーが画像を選択したら、選択した画像のファイルパスを読み取り、それをHTMLに配置できます。

例：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

Javascript：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});
32
mdunisch

私はこれが古い質問であることを知っていますが、この同じ問題を解決しようと試みている間にそれを見つけました。私は他のどこにも見つからなかったこのソリューションを共有する価値があると思いました。

基本的には、CSSを使用して<input>要素を非表示にし、<label>の周りをボタンのようにスタイルすることです。 [コードスニペットを実行]ボタンをクリックして、結果を確認します。

JavaScriptソリューションを使用したこともありましたが、それでもうまくいきましたが、CSSだけで「プレゼンテーション」の問題を解決できてうれしいです。

label.cameraButton {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.cameraButton:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>Nice image capture button</title>
</head>

<body>
  <label class="cameraButton">Take a picture
    <input type="file" accept="image/*;capture=camera">
  </label>
</body>

</html>
29
pseudosavant

Javascriptクリックイベントを送信することにより、ファイル入力要素をトリガーできます。

<input type="file" ... id="file-input">

$("#file-input").click();

たとえば、これを画像のクリックイベントハンドラーに配置し、CSSでファイル入力を非表示にすることができます。非表示であっても機能します。

その部分が機能したら、入力要素にchangeイベントハンドラーを設定して、ユーザーがファイルをいつ挿入したかを確認できます。このイベントハンドラーは、window.URL.createObjectURLを使用して、画像の一時的な「blob」URLを作成できます。例：

var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);

そのURLは、ページ上の画像のsrcとして設定できます。 （ただし、そのページでのみ機能します。どこにも保存しないでください。）

現在、すべてのブラウザがカメラキャプチャをサポートしているわけではないことに注意してください。 （実際、ほとんどのデスクトップブラウザーはそうではありません。）ユーザーがファイルを選択するように求められた場合、インターフェイスが依然として意味をなすことを確認してください。

13
duskwuff

カメラを直接開くために入力ファイルが必要な場合は、次のように入力ファイルにcaptureパラメーターを宣言するだけです。

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

6
Pedro Benevides