web-dev-qa-db-ja.com

画像ボタンをクリックして新しいファイルをアップロードするにはどうすればよいですか

画像ボタンをクリックして新しいファイルをアップロードするタスクがあります。私のコードは

    <label>File</lable>
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>

このボタンをクリックして、新しいファイルをアップロードしたいのですが、どうすればいいですか？コードは Demo から確認できます

javascriptjqueryhtmlcss3
19
Niths

次のような隠しファイル入力フィールドを追加できます。

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />

そして、やります：

$("input[type='image']").click(function() {
    $("input[id='my_file']").click();
});

デモ:: 更新されたフィドル

42
Sudhir Bastakoti

ブラウザ間の互換性のあるソリューションを探している場合は、plupload（ http://www.plupload.com ）をチェックアウトする必要があります。これは、私が覚えているものから画像ボタンもサポートしています。

2
Rasmus Bech

間違った入力を使用しているので、代わりにファイルを使用してください。ボタンをコードデモの円のように見せたい場合は、CSSを使用して「送信」の外観を変更する必要があります。これは次の形式にする必要があります。

<form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="myfile"/>
  <input type="submit" class="circle-btn"/>
<form>

サーバー側で使用している言語（PHP、ASP.NETなど）がわかりませんが、ページを作成する必要があります（PHPの場合は "upload_file.php"の例）。そのようなページを作成する方法について、Googleで簡単にサンプルを見つけることができます。コードをコピーするだけです。

PHPの例： http://www.w3schools.com/php/php_file_upload.asp

それが役に立てば幸い ：）

2
Remo H. Jansen

これは、cssを使用して実行できます。

このブログの4番目の回答を確認してください。

参照ボタンをカスタマイズするにはどうすればよいですか？

画像を。buttonクラスの背景画像として使用できます。

1
Supriti Panda

DemoUserの答えの補足、.focus（）を追加してください。

  $("input[type='image']").click(function() {
    $("input[id='my_file']").focus().click();
  });
0
user1087079