尝试选择多个图像时,图像选取器不起作用

时间:2015-02-15 07:41:12

标签: jquery image debugging jquery-plugins picker

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

所有事情都有效如果我使用这样的正常选择。

<select class="image-picker">

但是当我尝试通过包含属性多次

来使用多个选择时
<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>

1 个答案:

答案 0 :(得分:0)

使用超时来推送图像。 我认为这可以通过按一定间隔一次推送图像来解决内存问题:

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);
});