在javascript生成的表单中创建输入字段

js提琴

我有一个页面上的下拉区，显示照片成功上传到服务器一旦他们被添加到下拉区。每张照片都有一个叫做上载的类来保存每张单独的照片。一旦图像被上传，我需要每个照片有一个输入字段显示在它旁边，允许用户添加标签到每个照片。一旦他们键入标签，这将是逗号分隔在输入字段中，他们将能够点击提交。这时函数叫做

addTags()

，并根据文件名向照片添加标记。我想不出最专业的方法来做这件事，

我正在考虑创建一个包含所有隐藏字段的表单，并添加包含文件名的值的字段名称。使用ajax很容易获得文件名和标记。请告诉我，这种事应该怎么做才专业。

这个JS允许并循环显示上传的文件，

 // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({
        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),
        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {
            var tpl = $('<li class="working uploaded"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
        // Append the file name and file size      
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);
            // Initialize the knob plugin
            tpl.find('input').knob();
            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){
                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }
                tpl.fadeOut(function(){
                    tpl.remove();
                });
            });
            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

因此，在拖放区中上传的每个文件都会返回文件名，就像这样，

tpl.find('p').text(data.files[0].name)

现在我如何在这个JS函数中创建表单，为每个上传的文件添加名称到每个隐藏的表单字段，并添加一个文本输入字段，允许为图片添加标签。

本质上，我正在寻找一种方法来添加这样一个表单，

 <form onSubmit="addTags();return false;">
<input type="hidden" name="imgName" value="var imgName" id="imgName">
<input type="text" name="tags" palceholder="add tags seperated by ," id="tags">
<input type="submit" name="login" value="Add Tags" class="submit" id="adTags"/>
                    </form>

addTags() function

function addTags(){
    $.ajax({
        type: 'POST',
        url: 'data/add_tags.php',
        data: "&tag_type_id=" + $('#tag_type_id').val() + "&tag_target_name=" + $('#tag_target_name').val() +
            "&tag_target_url=" + $('#tag_target_url').val() + "&tags=" + $('#tags').val(),    
                success: function(response){
            console.log(response);
            if(response === 'error'){
                        $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Please add tags seperated by commas');
                $(".messageImage").append('<img src="images/error.png" height="50" width="50">');
                $('.message').slideDown(400).delay(10000).fadeOut(400)   
            }
            else {
                    $('.messageText').empty()
                    $('.messageImage').empty()
                    $('.messageText').append('Your tags have been added.');
                    $(".messageImage").append('<img src="images/success.png" height="50" width="50">');
                    $('.message').slideDown(400).delay(10000).fadeOut(400)   
            }   
       }
    });
 };
   AJAX makes call to this php function,
<?php
//Include files                 
require_once('../classes/class_login.php');
$tag_type_id = $_POST['tag_type_id'];
$tag_target_name = $_POST['tag_target_name'];
$tag_target_url = $_POST['tag_target_url'];
$tags = $_POST['tags'];
    /*** begin with some validation ***/
    if(!isset($_POST['tag_type_id'], $_POST['tag_target_name'], $_POST['tag_target_url'], $_POST['tags']))
    {
        /*** if no POST is submited ***/
        $msg = 'Please Submit a tag';
        print('error');
    }
    elseif(filter_var($_POST['tag_type_id'], FILTER_VALIDATE_INT, array("min_range"=>1, "max_range"=>100)) == false)
    {
        /*** if tag is too short ***/
        $msg = 'Invalid Tag Type';
                print('error');
    }
    elseif( strlen($_POST['tag_target_url']) == 0 )
    {
        /*** if tag is too long ***/
        $msg = 'Tag target is required';
                print('error');
    }
    elseif( strlen($_POST['tags']) == 0 )
    {
        $msg = 'Tag Required';
                print('error');
    }
    elseif(  strlen($_POST['tag_target_name']) == 0 )
    {
        $msg = 'Tag Name is too short';
                print('error');
    }
    elseif( strlen($_POST['tag_target_name']) > 30 )
    {
        $msg = 'Tag Name is too long!';
                print('error');
    }
    else
    {
        /*** if we are here, all is well ***/
        $tag_type_id = filter_var($_POST['tag_type_id'], FILTER_SANITIZE_NUMBER_INT);
        $tag_target_url = filter_var($_POST['tag_target_url'], FILTER_SANITIZE_STRING);
        $tag_target_name = filter_var($_POST['tag_target_name'], FILTER_SANITIZE_STRING);
        $tags = filter_var($_POST['tags'], FILTER_SANITIZE_STRING);
            addTags($tag_type_id, $tag_target_name, $tag_target_url, $tags);
            $msg = 'Tag Type Added!';
                    print('success');
        }
?>       

php函数定义在这样的类中，

function addTags($tag_type_id, $tag_target_name, $tag_target_url, $tags){
        /*** explode the tag string ***/
            $tag_array = explode(',', $tags);
            /*** loop of the tags array ***/
            foreach( $tag_array as $tag_name )
            {
                /*** insert tag into tags table ***/
                $tag_name = strtolower(trim($tag_name));
                $databaseQuery = "INSERT IGNORE INTO tags (tag_name ) VALUES ('$tag_name')";
                //Execute database query
                executeDatabase($databaseQuery);
                /*** get the tag ID from the db ***/
                $databaseQuery  = "SELECT tag_id FROM tags WHERE tag_name='$tag_name'";
                $result = executeDatabase($databaseQuery);
                $tag_id = mysqli_num_rows($result);
                /*** now insert the target ***/
                $databaseQuery = "INSERT INTO tag_targets
                    (tag_id, tag_target_name, tag_target_url, tag_type_id)
                    VALUES
                    ('$tag_id', '$tag_target_name', '$tag_target_url', '$tag_type_id')";
                executeDatabase($databaseQuery);
            }
}