0

ファイル アップロード ボックスを備えたフォームがあり、jQuery Filestyle プラグイン (http://www.appelsiini.net/projects/filestyle) を使用して入力のスタイルを設定しています。また、ユーザーがフォームを送信しなくても複数のファイルをアップロードできるようにする単純な JavaScript 関数も用意しました。最初のファイル アップロード入力は完璧に見えますが、ユーザーが [追加ファイルのアップロード] ボタンをクリックして新しい入力を作成すると、スタイルがまったく設定されません。これは、ページの読み込み時にプラグインが既に実行されており、DOM を変更すると、新しいものにスタイルが適用されなくなるためだと思います。

それが問題であると仮定すると、私の質問は、新しく作成されたファイル入力で Filestyle jQuery を呼び出す方法があるかどうかです。

これが私の Filestyle jQuery コードです。

    <script src="/scripts/jquery.filestyle.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        $("input.file").filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
    });
    </script>

そして私の JavaScript DOM 操作:

<script type="text/javascript">
var fileCounter = 1;
function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
}
</script>

アドバイスをありがとう！

4

3 に答える 3

1

私はこのようなことを試してみます（実際にこれをテストしていませんが）

<script type="text/javascript">
var inputCounter = 1;
function addFile() {
  inputCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + inputCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
  $('#'+file_'+inputCounter).filestyle({
        image: "/images/btn_select_file.gif",
        imageheight : 24,
        imagewidth : 115,
        width : 275,
    });
}
</script>

また、変数「fileCounter」が「inputCounter」に切り替えられているようで、おそらく問題を引き起こしています。

于 2012-05-17T18:06:23.333 に答える
1

関数でプラグインメソッドを呼び出して、プラグインfunction addFile()にスタイルを知らせる必要があるため、新しいfunction addFile()関数は次のようになります

function addFile() {
  fileCounter++;
  var newdiv = document.createElement('div');
  newdiv.id = 'file' + fileCounter;
  newdiv.innerHTML = '<div class="form-item"><label for="file_' + inputCounter + '">Upload Additional File ' + (inputCounter) + '</label>\r<input type="file" name="file_' + inputCounter + '" id="file_' + inputCounter + '" class="file"><span class="space"><a href="javascript:removeFile(' + inputCounter + ');">Remove</a></span>';
  document.getElementById("files").appendChild(newdiv);
  document.getElementById("filecount").value = inputCounter;
  $("input.file").last().filestyle({
            image: "/images/btn_select_file.gif",
            imageheight : 24,
            imagewidth : 115,
            width : 275,
        });
}

$("input.file").last()新しく追加されたファイル入力を選択し、プラグインを初期化してスタイリングを追加しています。

于 2012-05-17T18:03:34.137 に答える
0

もちろん、作成後にこれを追加するだけですnewdiv：

$(newdiv).filestyle({
    image: "/images/btn_select_file.gif",
    imageheight : 24,
    imagewidth : 115,
    width : 275,
});
于 2012-05-17T18:00:13.480 に答える