Question

我有一个带有文件上传框的表单，我正在使用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>

感谢您的任何建议！

Answer 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()正在选择新添加的文件输入，并通过初始化插件为其添加样式。

Answer 2

我会尝试这样的事情（虽然我实际上没有测试过这个）

<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”，这可能会导致您遇到问题。

Answer 3

当然，只需在创建newdiv后添加此内容：

$(newdiv).filestyle({
    image: "/images/btn_select_file.gif",
    imageheight : 24,
    imagewidth : 115,
    width : 275,
});

在DOM修改后重新运行jQuery插件的方法是什么？

3 个答案: