20

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

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

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

4

8 に答える 8

55

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

<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();
});

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

于 2013-04-25T08:50:47.490 に答える
13

javascript を入れる必要はありません<input>。<img>内側に次のようなもの<label>を必ず隠してください。<input>

   <label for="image">
      <input type="file" name="image" id="image" style="display:none;"/>
      <img src="IMAGE URL"/>
   </label>
于 2016-11-09T20:35:00.010 に答える
2

間違った入力を使用しています。代わりに file を使用してください。ボタンをコード デモの円のようにしたい場合は、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

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

于 2013-04-25T09:02:32.697 に答える
2

クロスブラウザ互換のソリューションを探している場合は、plupload ( http://www.plupload.com ) をチェックしてください。これは、私が覚えている画像ボタンもサポートしています。

于 2013-04-25T08:57:12.873 に答える
1

css を使用してこれを行うことができます。

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

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

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

于 2013-04-25T08:52:09.580 に答える
0

DemoUser の回答の補足として、.focus() を追加するとうまくいきます。

  $("input[type='image']").click(function() {
    $("input[id='my_file']").focus().click();
  });
于 2016-01-04T03:13:10.747 に答える