使用 jquery 克隆表单时，多文件上传不起作用

发布于 2024-12-18 10:31:27 字数 1623 浏览 3 评论 0原文

我必须生成多个动态表单。这些表单包含文件输入元素。我必须上传多个文件。对于动态表单生成，我使用了 Jquery 克隆方法，对于多个文件上传，我使用了 Jquery fyneworks 插件（http://www.fyneworks.com/jquery/multiple-file-upload/）。

每当我克隆表单时，我都会动态分配 id。克隆表单后，文件插件无法正常工作。即使我动态分配 id，它总是添加到第一个表单。

我使用以下代码创建了简单的测试场景：

<html>
<head>
<script src='jquery-1.6.1.js' type="text/javascript"></script>
 <script src='jquery.MultiFile.js' type="text/javascript" language="javascript"></script>
 <script src='jquery.blockUI.js' type="text/javascript" language="javascript"></script>

 <script>
 var i=0;
 $(function(){
    //$("#div0").hide();
 });

       function addMoreForms(){
            i++;
            var x = $("#div0").clone(true);//.insertAfter($("#myForm"));
            $(x).attr("id", "div"+i);
            $(x).find("#myForm0").attr("id","myForm"+i);
            $(x).find("#file0_wrap").attr("id","file"+i+"_wrap");
            $(x).find("#file0_wrap_list").attr("id","file"+i+"_wrap_list");
            $(x).find("#file0").attr("id","file"+i).attr("name","file"+i).attr("class","multi");
           //$("#myForm").append('<input type="file" name="files[]" class="multi"/>')
            $(x).show();
            $(x).insertAfter('#div'+(i-1));
       }

 </script>

</head>
<body>
<div id="div0">
<form id="myForm0" action="your-action">
    <input id="file0" type="file" name="file0" class="multi" maxlength="3"/>
</form>
</div>
<div>
 <a href="#" onclick="addMoreForms()">Add More</a>
 </div>
</body>
</html>

原文

I have to generate multiple dynamic forms. These forms contains file input element. I have to upload multiple files. For dynamic form generation I used Jquery clone method , for multiple file upload I have used Jquery fyneworks plugin (http://www.fyneworks.com/jquery/multiple-file-upload/).

Whenever I clone the form I will assign ids dynamically. After cloning the form the file plugin is not working properly. It always adding to first form even though I am assigning ids dynamically.

I have created simple test scenario with following code:

<html>
<head>
<script src='jquery-1.6.1.js' type="text/javascript"></script>
 <script src='jquery.MultiFile.js' type="text/javascript" language="javascript"></script>
 <script src='jquery.blockUI.js' type="text/javascript" language="javascript"></script>

 <script>
 var i=0;
 $(function(){
    //$("#div0").hide();
 });

       function addMoreForms(){
            i++;
            var x = $("#div0").clone(true);//.insertAfter($("#myForm"));
            $(x).attr("id", "div"+i);
            $(x).find("#myForm0").attr("id","myForm"+i);
            $(x).find("#file0_wrap").attr("id","file"+i+"_wrap");
            $(x).find("#file0_wrap_list").attr("id","file"+i+"_wrap_list");
            $(x).find("#file0").attr("id","file"+i).attr("name","file"+i).attr("class","multi");
           //$("#myForm").append('<input type="file" name="files[]" class="multi"/>')
            $(x).show();
            $(x).insertAfter('#div'+(i-1));
       }

 </script>

</head>
<body>
<div id="div0">
<form id="myForm0" action="your-action">
    <input id="file0" type="file" name="file0" class="multi" maxlength="3"/>
</form>
</div>
<div>
 <a href="#" onclick="addMoreForms()">Add More</a>
 </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

肤浅与狂妄 2024-12-25 10:31:27

你让事情变得复杂了。您想添加更多文件来上传，为什么不使用简单的代码呢？为什么你必须使用插件来做到这一点？

这是我添加更多要上传的文件的简单代码：

<script>
    var i=0;
    function addMoreForms(){
        i++;
        var $lastDiv = $("#div"+(i-1));
        var $div = $("<div/>").attr("id","div"+i).insertAfter($lastDiv);
        var $input = $lastDiv.find("input").clone();
        $input.appendTo($div);
    }
</script>

<form id="myForm" enctype="multipart/form-data" method="post" action="your-action">
    <div id="div0">
        <input type="file" name="file[]" class="multi" />
    </div>
    <div id="submit">
        <input type="submit" name="submit" value=" Upload " />
    </div>
</form>
<a href="#" onclick="addMoreForms()">Add More</a>

You make things complicate. you want to add more files to upload, why don't you use the simple code? why you have to use plugin to do it?

Here is my simple code to add more files to upload :

<script>
    var i=0;
    function addMoreForms(){
        i++;
        var $lastDiv = $("#div"+(i-1));
        var $div = $("<div/>").attr("id","div"+i).insertAfter($lastDiv);
        var $input = $lastDiv.find("input").clone();
        $input.appendTo($div);
    }
</script>

<form id="myForm" enctype="multipart/form-data" method="post" action="your-action">
    <div id="div0">
        <input type="file" name="file[]" class="multi" />
    </div>
    <div id="submit">
        <input type="submit" name="submit" value=" Upload " />
    </div>
</form>
<a href="#" onclick="addMoreForms()">Add More</a>

回复收藏 0 原文

~没有更多了~