Просмотр загруженной картинки?

Question

[Сергей Новиков]

Как сделать в загрузчике картинок, при нажатии на название открывалась новая вкладка с картинкой

tpl.find('p').text(data.files[0].name) 
 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

Заранее благодарю.

Весь код

$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        $(this).parent().find('input').click();
    });

    
    $('#upload').fileupload({

        dropZone: $('#drop'),
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
	
            tpl.find('p').html('<a href="file/26-04-14/' + data.files[0].name +'" target="_blank">' + data.files[0].name + '</a>') 
			
			.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
 
            data.context = tpl.appendTo(ul);

            tpl.find('input').knob();

            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            var jqXHR = data.submit();
        },

        progress: function(e, data){

            var progress = parseInt(data.loaded / data.total * 100, 10);

            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){

            data.context.addClass('error');
        }

    });


    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }
	
});

<?php

$allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

	$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

	if(!in_array(strtolower($extension), $allowed)){
		echo '{"status":"error"}';
		exit;
	}

	$folder = date("d-m-y"); 
	mkdir("file/".$folder."", 0777); 

	if(move_uploaded_file($_FILES['upl']['tmp_name'], 'file/'.$folder.'/'.$_FILES['upl']['name'])){
		echo '{"status":"success"}';
		exit;
	}
}

echo '{"status":"error"}';
exit;

Answer 1

[subalex]

tpl.find('p').html('<a href="' + data.files[0].name +'" target="_blank">' + data.files[0].name + '</a>') 
 .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

если есть готовый url картинки

Comments

[Сергей Новиков]

@subalex , url меняется в зависимости от даты, Вы мне как раз с этим помогали)

[subalex]

Если его положить в data.files[i].url, то мой код будет работать. Я просто не знаю, что у вас в name просто имя файла или путь к нему или что ?

[Сергей Новиков]

@subalex да путь к нему, http://сайт.ru/file/26-04-14/файл.png

[subalex]

tpl.find('p').html('' + data.files[0].name + '') .append('' + formatFileSize(data.files[0].size) + '');

тогда так должно работать

[subalex]

Ломает код тут. Исправил в ответе.

[Сергей Новиков]

@subalex не работает, не дописывает папки /file/26-04-14/

[subalex]

Вы ж сказали, что в name полный путь.

[Сергей Новиков]

@subalex Извините, не так прочитал

[subalex]

нужно положить url картинки с путем в какое-то поле данных на стороне сервера в data.files. А по-другому откуда JS узнает где он лежит ?

[Сергей Новиков]

@subalex тогда может подскажете как тут blueimp.github.io/jQuery-File-Upload/basic-plus.html устроен этот просмотр?

[subalex]

там в ответе от сервера в массиве files у каждого элемента есть поле url, в котором приходит полный url на картинку.

[Сергей Новиков]

@subalex может как то можно сделать также и в моем случае?

[subalex]

как-то можно. у меня ж нет вашего кода всего

[Сергей Новиков]

@subalex отредактировал вопрос

[subalex]

я ничего не пойму, если честно.
если вы используете fileupload, то почему и как вы используете этот пхп код, а не родной класс этого аплоадера на пхп.

add в аплоадере, как я понимаю вызывается еще до загрузки файла на сервак и получить его урл невозможно, т.к. его там еще нет. урл можно получить в done.

[Сергей Новиков]

@subalex как раз таки все родное)

[Сергей Новиков]

@subalex а что если сделать генерирование даты и вставить его в ссылку, тогда все совпадать будет