0

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

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

对，我只是手动删除和添加链接。

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

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

谢谢

4

2 回答 2

0

您想显示以前上传的项目。这没有捷径，但很容易，从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>
于 2013-10-06T21:19:22.680 回答
0

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

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

于 2013-10-06T21:12:51.687 回答