Question

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

我如何在这两种状态之间切换？特别是在页面加载..并且那里已经有了一个图像。

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

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

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

由于

Answer 1

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

如果要阻止提交文件，可以通过从"validate"事件处理程序返回false，或者可以返回稍后调用failure的{{3}}来执行此操作。在异步确定应该拒绝该文件之后。当您使用FileReader计算文件客户端的MD5哈希时，异步部分会进入，然后对您的服务器进行ajax调用，以确定是否存在具有匹配哈希的另一个文件，或者将其与您拥有的其他哈希值进行比较存储客户端用于在当前会话期间提交的文件。计算这个哈希值可能非常昂贵。

Answer 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>

FineUploader以删除模板开头

2 个答案: