如何通过jQuery-File-Upload /上传后更新下载节目

时间:2011-05-11 16:30:51

标签: php javascript jquery upload blueimp

我安装了the blueimp jQuery-file-upload

但是在完成上传后修改视图时出现了一个很大的问题,我希望通过在特定div中提升图像来进行全部显示

我希望所有的编辑都必须在jquery.fileupload-uix.js,

并且在此代码中完全符合:

this.getFileUrl = function (file, handler) {
        return file.url;
    };

    this.getThumbnailUrl = function (file, handler) {
        return file.thumbnail;
    };

    this.buildMultiDownloadRow = function (files, handler) {
        var rows = $('<tbody style="display:none;"/>');
        $.each(files, function (index, file) {
            rows.append(handler.buildDownloadRow(file, handler).show());
        });
        return rows;
    };

    this.buildDownloadRow = function (file, handler) {
        if ($.isArray(file)) {
            return handler.buildMultiDownloadRow(file, handler);
        }
        var fileName = handler.formatFileName(file.name),
            fileUrl = handler.getFileUrl(file, handler),
            thumbnailUrl = handler.getThumbnailUrl(file, handler),
            downloadRow = handler.downloadTemplate
                .clone().removeAttr('id');
        downloadRow.attr('data-id', file.id || file.name);
        downloadRow.find('.file_name a')
            .text(fileName);
        downloadRow.find('.file_size')
            .text(handler.formatFileSize(file.size));
        if (thumbnailUrl) {
            downloadRow.find('.file_download_preview').append(
                $('<a/>').append($('<img/>').attr('src', thumbnailUrl || null))
            );
            downloadRow.find('a').attr('target', '_blank');
        }
        downloadRow.find('a')
            .attr('href', fileUrl || null)
            .each(handler.enableDragToDesktop);
        downloadRow.find('.file_download_delete button')
            .button({icons: {primary: 'ui-icon-trash'}, text: false});
        return downloadRow;
    };

并在HTML中:

<div id="file_upload" class="panel">
            <form action="upload.php" method="POST" enctype="multipart/form-data">
            <div id="buttons">
                <div id="file-wrapper" class="title" title="upload images from your computer">
                    <input type="file" name="file[]" multiple="" accept="image/jpeg,image/gif,image/png,image/bmp" />
                </div>
                <div class="center">
                    <input type="button" id="url" class="button-big title" title="upload images from the web" value="" />
                </div>
            </div>
            </form>
            <table class="files">
                <tr class="file_upload_template" style="display:none;">
                    <td class="file_upload_preview"></td>
                    <td class="file_name"></td>
                    <td class="file_size"></td>
                    <td class="file_upload_progress"><div></div></td>
                    <td class="file_upload_start"><button>Start</button></td>
                    <td class="file_upload_cancel"><button>Cancel</button></td>
                </tr>
                <tr class="file_download_template" style="display:none;">
                    <td class="file_name"><a></a></td>
                    <td class="file_size"></td>
                    <td class="file_download_delete" colspan="3"><button>Delete</button></td>
                </tr>
            </table>
            <div class="file_upload_overall_progress"><div style="display:none;"></div></div>
            <div class="file_upload_buttons">
                <button class="button-big file_upload_start">Start All</button> 
                <button class="file_upload_cancel">Cancel All</button> 
            </div>
    </div>
    <br />
    <div class="panel">
        <div id="shows">        
            <!-- HERE I Want to repeat the div like -->
            <div class='preview'>
                 <h2>name</h2>
                 <img srch='img' />
            </div>
        </div>
    </div>

我尝试尝试但是没有代码我相信它很适合展示。

0 个答案:

没有答案