Question

我正在尝试创建一个动态表单，其中单个项目具有文件，文本和选择html输入类型，项目数量可以是动态的。问题是当使用jquery执行AJAX时，Form不会为文件输入类型序列化。请建议任何技术。我的代码如下：

<form id="Form1" enctype="multipart/form-data">
    <div id="divMain"></div>
    <div>
        <button id="Upload" type="button" value="Upload"><span>Upload</span></button>
        <input id="Add" type="button" value="Add" />
    </div>
</form>

<div id="status"></div>

<script type="text/javascript">
    var counter = 0;

    AddElements(); //add first element

    $("#Add").click(function () {
        AddElements();
    });

    function AddElements() {
        counter++;

        $("#divMain").append("<div><input id='Browse" + counter + "' name='Browse[]' type='file' value='Browse' data-target='#Name" + counter + "' />" +
                                  "<input id='Name" + counter + "' name='Name[]' type='text'/>" +
                                    "<select id='Type" + counter + "' name='Type[]'>" +
                                        "<option>Option1</option>" +
                                        "<option>Option2</option>" +
                                    "</select></div>");

        $("#Browse" + counter + "").change(function () {
            var filename = $(this).val();
            var textbox = $($(this).attr("data-target"));

            var lastIndex = filename.lastIndexOf("\\");
            var b = filename.lastIndexOf(".");

            if ((b == -1) | (b < lastIndex))
                filename = filename.substring(lastIndex + 1);
            else
                filename = filename.substring(lastIndex + 1, b - lastIndex - 1);

            textbox.val(filename);
        });
    }

    $("#Upload").click(function (e) {
        e.preventDefault();

        $("#status").html('Uploading....');

        var ajaxData = $("#Form1").serialize();

        $.ajax({
            url: "AjaxPostDemo.aspx",
            type: "POST",
            data: ajaxData,
            cache: false,
            processData: false,
            success: function (data) {
                $("#status").html("success: " + data);
            },
            error: function (result) {
                $("#status").html("error: " + result);
            }
        });
    });
</script>

Answer 1

更改您的脚本它肯定会起作用。 :-)

<script type="text/javascript">
                var counter = 0;
                $(document).ready(function () {
                    AddElements(); //add first element

                    $("#Add").click(function () {
                        AddElements();
                    });

                    function AddElements() {
                        counter++;

                        $("#divMain").append("<div><input id='Browse" + counter + "' name='Browse[]' type='file' value='Browse' data-target='#Name" + counter + "' />" +
                                      "<input id='Name" + counter + "' name='Name[]' type='text'/>" +
                                        "<select id='Type" + counter + "' name='Type[]'>" +
                                            "<option>Option1</option>" +
                                            "<option>Option2</option>" +
                                        "</select></div>");

                        $("#Browse" + counter + "").change(function () {
                            var filename = $(this).val();
                            var textbox = $($(this).attr("data-target"));

                            var lastIndex = filename.lastIndexOf("\\");
                            var b = filename.lastIndexOf(".");

                            if ((b == -1) | (b < lastIndex))
                                filename = filename.substring(lastIndex + 1);
                            else
                                filename = filename.substring(lastIndex + 1, b - lastIndex - 1);

                            textbox.val(filename);
                        });
                    }
                });
                $(document).ready(function () {
                    $("#Upload").click(function (e) {
                        e.preventDefault();

                        $("#status").html('Uploading....');

                        var ajaxData = $("#Form1").serialize();

                        $.ajax({
                            url: "AjaxPostDemo.aspx",
                            type: "POST",
                            data: ajaxData,
                            cache: false,
                            processData: false,
                            success: function (data) {
                                $("#status").html("success: " + data);
                            },
                            error: function (result) {
                                $("#status").html("error: " + result);
                            }
                        });
                    });
                });
    </script>

第二个选项 http://www.uploadify.com/documentation/uploadify/multi/

首选它会在很棒的UI上一次上传多个文件。： - ）

带有文本和文件字段的动态jquery AJAX上载表单

1 个答案: