Question

我有一张表格可以上传图片，

 <form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple />
            </div>

            <form onSubmit="addTags();return false;">
            <ul>
                <!-- The file uploads will be shown here -->
            </ul>
                    <input type="submit" name="login" value="Add Tags" class="submit" id="login"/>
                    </form>
                    </div>
                    </form>

上传图像后，它们会在表单区域中列出，以显示已成功上载的文件名。 jquery像这样处理这个，

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

请注意，文件名已添加为<li> file name </li>

的HTML

完成此操作后，我希望用户能够单击输入字段并输入描述每个图像的逗号分隔标记。

我有一个名为addTags()

的功能

我不是只列出文件名，而是如何制作它，以便创建一个输入字段，每个输入的名称值是文件名，允许我轻松地将数据输入数据库？

我的表单调用了addTags（）函数，该函数是围绕文件名列出的区域构建的，但是我无法弄清楚如何使它的输入字段被列出而不仅仅是名字，这个形式我说的看起来像这样，

<form onSubmit="addTags();return false;">
            <ul>
                <!-- The file uploads will be shown here -->
            </ul>
                    <input type="submit" name="login" value="Add Tags" class="submit" id="login"/>
                    </form>

完整的Javascript看起来像这样，

$(function(){

    var ul = $('#upload ul'); 

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // 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);

            // 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();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

请告诉我要更改的内容，使用文件名作为输入字段作为每个输入字段的名称值来保存标记。

感谢您的帮助。

使用上传文件中的值创建表单

0 个答案: