FineUploader 从删除模板开始答案

【问题标题】：FineUploader start with delete templateFineUploader 从删除模板开始
【发布时间】：2013-10-06 19:05:38
【问题描述】：

我正在使用 FineUploader，但我遇到了一个问题。用户可以上传图像，但图像可能已经存在（之前上传的）。当已经有图片（以前上传）时，我想显示删除链接，当没有图片时..我要显示上传链接。

如何在这两种状态之间切换？特别是在页面加载时..那里已经有一张图片了。

知道我只是手动删除和添加链接。

$('.fine-uploader0 .qq-upload-list').append('删除');

我可以为每一个都有一个模板吗？并在它们之间切换？

谢谢

【问题讨论】：

我不太清楚您的要求。此外，尚不清楚您如何确定图像是否已上传。请编辑您的答案以显示您的所有客户端代码。另外，请提供您的应用程序的描述。同样，要确切地确定您要在这里做什么或要解决什么具体问题有点困难。
@RayNicholus：在您的 stackoverflow 个人资料中……已经有一张您的照片。所以你已经在“插件”中有一张照片。不复杂。如果那个插件是FineUploader……你怎么告诉插件已经有一张图片了？

标签： jquery fine-uploader

【解决方案1】：

没有很好的跨浏览器方法来确定文件是否已经提交。有人可能会说比较文件名是可以接受的，但事实并非如此。这在许多情况下都会失败，并且不是一个合理的选择。即使有合理的方法在客户端（跨浏览器）进行此确定，也无法告诉 Fine Uploader 存在重复文件。

如果您想阻止文件被提交，您可以通过从 "validate" 事件处理程序中直接返回 false 来实现，或者您可以返回一个 qq.Promise，然后在您完成之后调用 failure异步确定该文件应该被拒绝。当您使用 FileReader 计算文件客户端的 MD5 哈希值时，异步部分就会出现，然后对您的服务器进行 ajax 调用以确定是否存在具有匹配哈希值的另一个文件，或者将其与您拥有的其他哈希值进行比较存储在当前会话期间提交的文件的客户端。不过计算这个哈希值可能相当昂贵。

【讨论】：

【解决方案2】：

您想显示以前上传的项目。这个没有捷径但是很简单，从FineUploader的onComplete，这里有一些我如何显示照片的代码，你可以用它来显示以前的照片。

   onComplete: function(id, fileName, responseJSON) {
                    if (responseJSON.success) {
                        $('#file-' + id).removeClass('alert-info')
                                        .addClass('alert-success')
                                        .html('<i class="glyphicon glyphicon-ok"></i> ' +
                                              'Successfully saved ' +
                                              '“' + fileName + '”' +
                                              '<br><img src="/images/message_ok.png" alt="' + fileName + '">');
                        $.when(loadThumbs()).done(function () {
                            $(".qq-upload-list > .alert-success").remove();
                        });
                        myprettyprompt.success("Success!");

   function loadThumbs() {

        var PhotoRequest = {
            propertyId: <%=PropertyId %>
            }
        var currentTime = new Date();
        var n = currentTime.getTime();
        postUrl = "myurl?nocache="+n; //use nocache, mobile safari IOS6 caches ajax urls!

        $.ajax(
        {
            url: postUrl,
            type: "POST",
            cache: false,
            data: JSON.stringify(PhotoRequest),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                loadThumbsCallBack(data.d);
            }
        });

    }

    function loadThumbsCallBack(data) {
        var items = [];
        var photoTypeSelectList = 
            '<select class="form-control" data-id="{id}">' +   
            '<option value="Misc">Misc</option>' +    
            '</select>'
        var defaultCheckBox = '<label><small>First Photo (Default)</small></label><input type="checkbox" class="default-photo-cbx" data-id="{id}" {checked} />';
        var itemTemplate = '<li><img data-photo-type="{photo_type}" data-id="{id}" src="{url}" /><a class="glyphicon glyphicon-remove" href="#"></a><div>' + photoTypeSelectList + defaultCheckBox + '</div></li>';

        //clear current image thumbs
        $('#imageThumbs').empty();

        $.each(data, function (index, element) {
            var item;
            var checked = '';

            if(element.DefaultPhoto){
                checked = 'checked="checked"';
            }
            item = itemTemplate.replace(/{id}/g, element.Id).replace('{url}', element.Url).replace(/{photo_type}/g, element.PhotoType).replace('{checked}',checked);

            //mark photo type selected if photo type exists
            if (element.PhotoType !== null) {
                item = item.replace('value="' + element.PhotoType + '"', 'value="' + element.PhotoType + '" selected="selected"');
            }

            items.push(item);
        });


        $('#imageThumbs').append(items.join(''));


        $("#imageThumbs > li > a").click(function () {
            deleteThumb($(this).prev().attr('data-id'));
        });

        $("#imageThumbs > li > div >select").change(function () {
            updatePhotoType($(this).attr('data-id'), $(this).find('option:selected').text());
        });

        $("#imageThumbs > li > div > .default-photo-cbx").change(function () {
            var isChecked = $(this).is(':checked');

            //ignore if unchecking
            if(isChecked){
                UpdateDefaultPhoto($(this).attr('data-id'), $(this).is(':checked'));
            }
        });
    }

 <div id="bootstrapped-fine-uploader">
    </div>
    <div>
        <ul id="imageThumbs">
        </ul>
    </div>
    <div class="clearfix"></div>

【讨论】：