0

私の JavaScript コード:

$("#formimage").click(function(){
    $("#avatar").click();
});


<input type="file" name="avatar" id="avatar" style="display: none;" onchange="this.form.submit()" />

これでは、アバターファイルタグは呼び出されません...そしてエラーも出ません...ブラウザコンソールで

4

1 に答える 1

2

他の何かをクリックしてファイルタイプの入力をトリガーするのは困難です。遭遇する最大の問題は、IE がこれをセキュリティ上の問題と見なし、許可しない可能性があることです (入力が非表示の場合)。この問題を回避するには、画像の背後にある入力を「フェード」して、ユーザーが画像をクリックしたときに実際にファイル入力をクリックしているようにすることができます。

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

<div class="hiddenFileInputContainter">
    <img class="fileDownload" src="/images/ico_upload.png">
    <input type="file" name="fileUp" class="hidden" accept="image/*">
</div>

次に、実際にページから入力を削除せずに、入力の不透明度をゼロに設定して、その背後にある画像を表示できるようにする必要があります。

input[type='file'].hidden
{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0;
    filter: Alpha(Opacity=0);
}

画像とコンテナーのサイズも設定する必要があります。

img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

入力のサイズがオーバーフローするように設計されていることに注意してください。そのため、コンテナのどこをクリックしても、コンテナ内の入力にヒットします。入力は可能な限り大きくなるように意図されており、ボタンの実際のサイズはコンテナと画像に設定されています。

ダイアログを開くことができたら、フォームの送信は次のようにするだけです。

$("#fileUploadField").on("change", function() {
    $("#formId").submit();
});

または、これを試して、ファイル入力をボタンのようにします。

http://blueimp.github.io/jQuery-File-Upload/

于 2013-10-28T06:33:29.453 に答える