-2

テスト用のフォームは次のようになります。

http://screencast.com/t/sp6WiM0H

私が取りたい次のステップは、ファイルのアップロード用のデフォルトの参照/送信ボタンを削除し、ボタン (上記のリンクの青い [写真の追加] ボタン) を介してすべてを行うことです。

  • ユーザーが「写真を追加」をクリックします。
  • ユーザーは写真を閲覧できます。
  • ユーザーが写真を選択すると、自動的に「送信」されます。

あなたならどうしますか?

JSが必要かもしれないのでタグ付けしました。

ありがとうございました

編集:

フォームは次のようになります。

<form action="upload_image.php" method="post" enctype="multipart/form-data">
    <div class="edit">
       <a href="" class="add blue_bg" onclick="performClick(document.getElementById('theFile'));">Add <br/> Pictures</a>
   </div>
   <input style="display:none;" type="file" id="theFile" name="photo" />
   <input type="hidden" name="owner_id" value="<?php echo $profileData[0]['id'] ?>">
</form>

閲覧はできますが、フォームが送信されていないようです。

JS は次のようになります。

function performClick(node) {
   var evt = document.createEvent("MouseEvents");
   evt.initEvent("click", true, false);
   node.dispatchEvent(evt);
}

編集:今それを手に入れました、フォーム送信を処理するためにこのJSを追加しました:

$("input[type='file']").on("change", function(){
    $("#photoForm").submit();
});

name="photo"入力 type=file にも追加されます。

4

1 に答える 1