0

FineUploader を使用していますが、1 つ問題があります。ユーザーは画像をアップロードできますが、画像が既に存在している可能性があります (以前にアップロードされたもの)。画像が既にある場合（以前にアップロードしたもの）は削除リンクを表示し、画像がない場合は..アップロードリンクを表示するにはどうすればよいですか。

これら 2 つの状態を切り替えるにはどうすればよいですか? 特にページが読み込まれます..そこにはすでに画像があります。

リンクを手動で削除および追加するだけです。

$('.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 に答える