上传的图片只显示一些缩略图

Question

当它们被上传到服务器时，我正在尝试显示带有输入字段的缩略图图像。问题是我的功能是在上传之前尝试显示图像。

我认为这与在服务器上存在缩略图之前调用它们有关。有没有办法更改我的代码以在完成上传到服务器后调用要显示的图像？

这是我的 HTML

  <div class="module">
            <div class="moduleTitle">Upload Photos</div>            
                   <form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data">
                    <input type="hidden" name="username" value="<?php echo $username; ?>" id="username">
            <div id="drop">
                Drop Here

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


            <ul>
                <!-- The file uploads will be shown here -->
            </ul>
                 </form>
            </div>

             <div class="module">
            <div class="moduleTitle">Add Tags to Images</div> 
            <form onSubmit="addTags();return false;" id="tagAddForm">
            <ul>
        <!-- Ths is where the tag inputs will appear -->
        </ul>
             <input type="submit" name="login" value="Add Tags" class="submit" id="login"/>
           </form>
        </div>

这是我的 JS

$(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);


            //Create an empty container
            var path = "artistpit/users/" + $("#username").val() + "/";
            var $elems = $();
            //Cycle thru the files
            $.each(data.files, function(idx, file) {
                //Create an input with attrsd
                var $input = $("<input/>", {
                    'type': 'text',
                    'placeholder': 'separate tags with commas',
                    'name': file["name"]
                });
                //Create list element with an image thumb + append input
                var $li = $("<li/>", {
                html: "<img src='" + path + file["name"] + "' width='50' />"
                }).append($input);
                //Populate the container with the list item
                $elems = $elems.add($li);
            });
            //Append all list items
            $("#tagAddForm > UL").append($elems); 




            // 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';
    }



});

Answer 1

如果我理解正确，如果更新完成后不将缩略图添加到DOM，您的问题可能会得到解决。

尝试在上传的回调中添加元素。我为 submit() 选项添加了一个回调。

$(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);


            //Create an empty container
            var path = "artistpit/users/" + $("#username").val() + "/";
            var $elems = $();
            //Cycle thru the files
            $.each(data.files, function(idx, file) {
                //Create an input with attrsd
                var $input = $("<input/>", {
                    'type': 'text',
                    'placeholder': 'separate tags with commas',
                    'name': file["name"]
                });
                //Create list element with an image thumb + append input
                var $li = $("<li/>", {
                html: "<img src='" + path + file["name"] + "' width='50' />"
                }).append($input);
                //Populate the container with the list item
                $elems = $elems.add($li);
            });    


            // 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().success(function(result, textStatus, jqXHR){
                //Append all list items
                $("#tagAddForm > UL").append($elems);
            });
        },

        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';
    }



});