webuploader的问题

Question

webuploader的问题，上传到后台没有问题，后台是使用php，但是现在想问的问题是怎么把数据放到容器里，数据可以取的出来，但是就是不知道要放到哪里。

要放到哪个位置呢?大神帮帮忙，谢谢。
是从数据库读取出来的预览效果

Answer 1

上传成功后把 id 和访问地址存到 mysql，刷新的时候，php 后端再从 mysql 把图片信息列表拉出来显示。

Answer 2

用sessionstorage和localstorage存本地

Answer 3

你上传成功后,后台会返回上传成功的图片路径,用一个全局的数组保存这些图片地址.然后要使用的时候,遍历一遍生成img的列表,就能显示图片了.
不过我想题主想要的是不是预览效果啊???

上传预览

关键有两个点: 绑定uploader的两个事件fileQueued,uploadSuccess,
我把我自己部分代码写出来你作为参考吧:

1. 预览: 生成一个绑定了file.id的 html,方便后面上传成功后替换img地址.
uploader.on('fileQueued', function (file) { // file 是上传图片的File对象
                var imgHtml = "<div id='" + file.id + "' class='image-content'>" +
                    "<img class='preview-image' alt='" + file.name + "' title='" + file.name + "'/>" +
                    "</div>"
                    
                var $li = $(imgHtml),   // 预览内容对象
                    $img = $li.find('img'),  // 图片对象
                    $pre = $("#" + me.previewId); // 预览id

                $pre.html($li);
                // 通过上传div对象插入imgHtml即可预览.  
              ...
              ...
               
              });      
2. 返回结果赋值给img : 拿到后端返回的图片http地址
        
        // file :上传文件File对象 
        // response: 后端返回图片结果
    uploader.on('uploadSuccess', function (file, response) {
                var $li = $('#' + file.id),
                    $button = $li.siblings(".image-thumbnail-footer").find('.image-upload-indicator');
                $button.attr("title", "已上传");
                $button.find("i").attr("class", "fa fa fa-check-circle text-success");
                $li.find("img").attr("src", response);
            });

Answer 4

虽然不是很明白题主的意思，但是如过图片少，想要预览的效果可以使用FileReader对象，将图片的base64保存到localstorage，刷新后再取出来显示，个人想法

<input id="upload" type='file' onchange="preview(this.files)">
        <div id="uploadBtn">submit</div>
        <script type="text/javascript">
            files = localStorage.getItem('path');
            function preview(files) {
                for (var i = 0;i < files.length;i++) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        localStorage.setItem('path',this.result);
                    };
                    reader.readAsDataURL(files[i]);
                }
            };
            if(files) {
                 var image = new Image();
                 image.width = 100;
                 image.src = files;
                 document.body.appendChild(image);
            }
        </script>

Answer 5

不是很明白, 你的意思是你想要预览,但是不用插件的功能,自己后台捞数据然后实现,但是预览这个div不知道放哪里?
官方是这样的嘛

// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


    // $list为容器jQuery实例
    $list.append( $li );

    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});

主要是这这部分

    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


    // $list为容器jQuery实例
    $list.append( $li );

动态往容器里加div,你的图片比较多,这个class可以模仿这样动态加,至于最外面的容器放哪里,当然看你UI自己掂量了。上面的童鞋讲得挺清楚的