Предварительный просмотр нескольких изображений в формате HTML, прежде чем они будут загружены

Question

Предварительный просмотр нескольких изображений в формате HTML, прежде чем они будут загружены

0

Я хочу, чтобы пользователь мог добавлять и просматривать предварительный просмотр нескольких изображений в своем сообщении, прежде чем отправлять свое сообщение. Это можно сделать с помощью JQuery, я просто не знаю, как это сделать.

Приведенная ниже ссылка полезна, но не полностью отвечает на мой вопрос.

Предварительный просмотр изображения перед его загрузкой

По существу пользователь нажимает [add images] и выбирает несколько изображений, после чего они будут видеть все выбранные ими изображения и затем нажмите POST.

Я буду делать то же самое с встраиванием ссылок YouTube и обычных ссылок в один и тот же пост.

Поэтому в конце будет 3 кнопки... [add images], [add video], [add link]

Однако основной вопрос заключается в предварительном просмотре нескольких изображений...

Charl Du Plessis 03 янв. 2014, в 09:48

Источник

Теги:

php

javascript

jquery

html

image

2 ответа

Ещё вопросы

canadaCoder · Answer 1 · 2014-01-03T06-37-00.000Z

Ваш вопрос довольно общий, и есть несколько подходов, которые могли бы работать. В чем именно проблема, с которой вы сталкиваетесь?

Вы можете найти это полезной отправной точкой: http://blueimp.github.io/jQuery-File-Upload/

Gopal · Answer 2 · 2014-01-03T06-10-00.000Z

Вот пример с параметром предварительного просмотра и удаления

<input style="display:none;" class="uploader" accept="image/*"  type="file" name="images[]" />
<div class="previewimg">//here preview images will be append

<script type="text/javascript">
var i=0,MAX_UPLOAD=10;
$(function(){

    $('[name=images\\[\\]]').change(function(){
                if(isvalidfileext($(this).val())){
                    var el=$(this).clone();
                    genpreview(this);
                    if($('.uploader').length==MAX_UPLOAD){
                        el.attr('disabled','disabled');
                    }
                    el.val('');
                    el.insertBefore(this);
                    el.bind('change',arguments.callee);
                    $(this).unbind('change',arguments.callee).hide();
                    submitcontrol();
                }else{
                    $(this).val('');
                    alert('Invalid extension');
                }
            }
    );
});
function isvalidfileext(name){
    var ext=name.toLowerCase().substr(-4);
    if(ext=='.png'||ext=='.jpg'||ext=='.gif'){
        return true;
    }
    return false;
}
function genpreview(field){
    var file=field.files.item(0);
    var tpl='<div class="add-photo-btn-showpic">'+//the image preview div
    '<div class="add-photo-btn-showpic1"><img   /></div>'+//the image preview div
    '<div class="add-photo-btn-showpic2">//the image preview div
           <a href="#" class="remove" onclick="return false;">Remove</a></div>'+//the image preview div
    '</div>';       
    var el=$(tpl);
    var image=new Image();
    image.onload=function(){
        var img=el.find('img');
        if(image.width>image.height){
            img.attr('width',80);
            img.attr('height',80);              
        }else{
            img.attr('width',80);
            img.attr('height',80);
        }
        img.attr('src',image.src);
    }
    image.src=window.URL.createObjectURL(file);     
    el.find('a.remove').click(function(){
        $(field).remove();
        $(el).remove();
        $('.uploader:visible').removeAttr('disabled');
        submitcontrol();
    });
    el.appendTo('.previewimg');
}
</script>