0

input=file のスタイルを設定しようとしているので、非表示にして代わりにボタンを使用しています。ボタンのクリック機能で、このコードを書きました

$('button').click(function() {
    $('input[type=file]').trigger('click'); 
});

しかし、ファイルを選択したらすぐにフォームを送信したいです。だから私は書いた

$('input[type=file]').on('change', function() { 
    // select the form and submit
$(form).submit();
});

入力 [type=file] を非表示にするトリガーを使用している場合、これは機能しませんが、Choose ファイルを表示する場合です。onChange 関数が機能し始めます。

input[type=file] hidden を知り、トリガーのみを使用してフォームを送信する必要があります。

4

2 に答える 2

0

ボタンも必要ありません。入力フィールドのみを使用して不透明度で非表示にすることができます。使用すると、ボタン:afterのスタイルを設定できます。IE7 以前とは互換性がないことに注意してください。:after

HTML

<form>
    <input type="file">
</form>

CSS

input[type="file"] {
    margin:19px;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    font-size:31px;
    clip:rect(0px, 123px, 40px, 0px);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    -moz-opacity:0;
   -khtml-opacity:0;
   opacity:0;
}
form:after {
    content:'upload file';
    font:small-caps 15px Georgia;
    letter-spacing:1px;
    border-radius:10px;
    border:1px solid #eee;
    width:100px;
    padding:10px;
    margin:20px;
    text-align:center;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    background-color:#f8f8f8;
}
form {
    color:#666;
}
form:hover:after {
    background-color:#f3f3f3!important;
    color:#c00;
}

JQuery

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

これがデモです：http://jsfiddle.net/kcKqX/

于 2013-02-06T10:49:53.523 に答える
0

をトリガーするよりも良い方法を提案しますclick。labelに aを使用し、inputボタンのすべてのスタイルをそのラベルに適用します。

HTML:

<input type="file" name="file" id="file_in" class="hidden" />
<label for="file_in" class="button">Add file</label>

CSS:

.hidden {
display: none;
}

.button {
 background: #0f0;
}

Jクエリ:

$('input[type=file]').on('change', function() { 
    // select the form and submit
$(form).submit();
});
// You can completely avoid the `trigger` code.
于 2013-02-06T09:49:10.470 に答える