HTML 5 галерея перетаскивания - PullRequest
Новая
       3

HTML 5 галерея перетаскивания

0 голосов
/ 02 марта 2012

Hei, Я новичок в html5, пытаясь создать галерею HTML5 путем перетаскивания с рабочего стола.

Вот мой код 

 <!DOCTYPE html>
  <html>
 <head>
 <script>
            function doDrop(event){
                    var files = event.dataTransfer.files;
                    img.src = files[0].getAsDataURL();
                    document.body.appendChild(img);
                }
            </script>
            </head>
            <body>
                <div style="border:1px solid black; with:100px; height:100px" 
                    ondragover="event.stopPropagnation(); event.preventDefault();"
                    ondrop="event.stopPropagnation(); event.preventDefault(); doDrop(event);"
                ></div>
            </body>
            </html>

Я хочу создать просто галерею изображений, а не другие файлы, такие как excel, word, но мой код работает только для одной картинки. У меня нет возможности перетащить все картинки сразу. Может ли кто-нибудь руководство, как это сделать?

Ответы [ 2 ]

0 голосов
/ 07 августа 2012

Измените функцию для повторения цикла, как показано ниже. 

              function doDrop(){
                    var files = event.dataTransfer.files;
                  for(var i=0;i<files.length;i++){
                    var img=document.createElement('img');
                    img.src = files[i].getAsDataURL(); // You may also use createObjectURL
                    document.body.appendChild(img);
                   }
                }

Посмотрите на демонстрацию, Chrome изменил спецификацию на webkitGetAsEntry ()

http://html5 -demos.appspot.com/static/dnd/all_types_of_import.html

0 голосов
/ 03 марта 2012

Если вам нужно обрабатывать несколько файлов, очевидно, вам нужно перебирать эту переменную «files», а не только обращаться к первому изображению.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...