php - 如何从具有多个 div 和多个动态元素的表单发送文件和数据，如下所示？

Question

JavaScript：

$("#selectButton").live("click", function () {
    $("#selectedFile").live("change", function () {
        //var inp = document.getElementById('selectedFile');
        files = document.getElementById('selectedFile').files;
        $("#songs-sec table").html('');
        $("#songs-sec table").append('<tr><th>Track No</th><th>Song Title</th><th>Artists</th><th>Creation On</th></tr>');
        for (var i = 0; i < files.length; ++i) {
            var name = files.item(i).name;
            var size = files.item(i).size;
            var type = files.item(i).type;
            var file = files.item(i);
            if (type == "audio/mpeg") {
                $("#songs-sec table").append('<tr><td><input style="width: 20px; font-size:12px;padding: 3px;" type="text" class="trackno" name="trackno[]" value="' + (i + 1) + '" /></td><td style="width: 80px; font-size:12px;padding: 3px;"><input style="padding: 3px;" type="text" class="song" name="song[]" value="' + name + '" /></td><td><input style="padding: 3px;" type="text" class="art" name="artist[]" /></td><td><input style="width: 70px;padding: 3px;" type="text" class="creationdate" name="creationdate[]" /></td></tr>');
            } else if (type == "image/jpeg") {
                cnt = i;
                readFile(cnt);
            }
        }
        $("#songs-sec table").append('<tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td><input type="submit" id="uploadButton" name="upload" value="Upload" style="border:none;height: 42px; color: #fff;background: -moz-linear-gradient(center top , rgb(58, 166, 227) 0px, rgb(46, 160, 225) 51%, rgb(24, 153, 226) 100%) repeat scroll 0% 0% transparent;" /></td></tr>');
    });
});

HTML：

<form action="upload.php" id="upload-form" method="post" enctype="multipart/form-data">    
      <div id="upload-sec">
            <input type="text" id="album_name" name="album_name" placeholder="What is Album Name?" />
                <input type="file" id="selectedFile" name="selectFile" style="display: none;" multiple />
                <input type="button" id="selectButton" style="width: 120px;height: 42px; border: none;color:#fff;font-size: 16px;background: -moz-linear-gradient(center top , rgb(58, 166, 227) 0px, rgb(46, 160, 225) 51%, rgb(24, 153, 226) 100%) repeat scroll 0% 0% transparent;" value="Browse Album" onclick="document.getElementById('selectedFile').click();" />
            </div>
            <div id="songs-sec">
                <table>    
                </table>
            </div>
       </div>
</form>

上面提到的 JavaScript 代码正在运行。但是，在提交数据时，表单不会发布下面给出的数据。

接下来我应该尝试什么？

Answer 1

也许这种方式会更好

$(document).ready(function() {
    // submitting 
    $('#upload-form').on('submit', function() {

        // get values
    var answer = $("#album_name").val();
        // if empty
        if(answer == '') {
            alert('write album name');
        } else {
            // ajax
            $.ajax({
                url: $(this).attr('action'), // path for submit (upload.php)
                type: $(this).attr('method'), // here is post
                data: $(this).serialize(), // put all values into $_POST
                success: function(html) { 
                    // I get answer from upload.php
                    alert(html);
                }
            });
        }
        return false; // for not submitting the form
    });
});