尝试选择多个图像时图像选择器不起作用答案

【问题标题】：Image Picker is not working when try to select multiple images尝试选择多个图像时图像选择器不起作用
【发布时间】：2015-02-15 07:41:12
【问题描述】：

我正在使用这个 Image Picker jQuery 插件 (http://rvera.github.io/image-picker/) 来显示图片并进行多选

如果我使用这样的正常选择，一切都会正常。

<select class="image-picker">

但是当我尝试通过包含属性multiple来使用多重选择时

<select class="image-picker" multiple="multiple">

所有图像都被冻结，无法选择，我什至无法选择一张图像。

这是我的源代码

 <!DOCTYPE html>
<html>
    <head> 
        <style>


  .image_picker_image {
            max-width: 140px;
            max-height: 100px;
            background-color: #FF0000;
        }
    </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script src="image-picker/image-picker.js"></script>
        <link rel="stylesheet" href="image-picker/image-picker.css" />

        <script type="text/javascript">
            $(document).ready(function () {
                $("select").imagepicker();
            });
        </script>


    </head>
    <body>

        <!--code for imagepicker-->
        <select class="image-picker" multiple="multiple">
            <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
            <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
            <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
            <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
        </select>

    </body>
</html>

【问题讨论】：

工作正常jsfiddle.net/mgvrc/246
找到了。我忘记了 jquery 在脚本标签中不应该有 type="text/javascript" 。但是，我真的很感谢您的帮助。 ^^

标签： jquery image debugging jquery-plugins picker

【解决方案1】：

使用超时来推送图像。我认为通过每隔一段时间推送图像来解决内存问题：

this.imagePicker.getPictures({
        maximumImagesCount: 10,
        width:512,
        height:512,
        outputType: 1 ,
        quality:45
     }).then((results) => {
       for (var i = 0; i < results.length; i++) {
         if(results[i] ){
           let thisimg = {
               "src":'data:image/jpeg;base64,' + results[i] 
           };
           setTimeout(()=>{
            this.imageLists.push( thisimg );
           },1000) 
           //this.imageLists.reverse();
         } 
       }  
    }, (err) => { 
        this.events.publish("toast",err);
});

【讨论】：