Member 11837260 Ответов: 0

Как перетащить и изменить размер загруженного изображения в iframe ?

Hello,
Please can someone help me solve this problem. I have a function which allows me to create a DIV then, to upload images and add them in an iframe, these images are placed one after the other. I would like to be able to move and resize every image I uploaded to the iframe.

I'm having a lot of trouble doing this and I've tried a few methods but it doesn't work, so please can someone help me fix this problem. 
Thank you in advance for your comments.


Что я уже пробовал:

<!DOCTYPE html>
<html>
<head>
    <title>Editable content example</title>
    <meta charset="utf-8" />
 <head>

 <!-- Fonction d'ajout d'image -->
 <script>
    function previewFiles() {
   oFrame = document.getElementById("myiframe");
   oDoc = oFrame.contentWindow.document;
      // Create a new div.
    var divimage = oDoc.createElement("div");
    divimage.setAttribute("id", "preview");
    divimage.setAttribute("style", "resize: horizontal");
    oDoc.body.appendChild(divimage);
   
 var preview = oDoc.querySelector('#preview');
 var files   = document.querySelector('input[type=file]').files;

 function readAndPreview(file) {
 
   // Veillez à ce que `file.name` corresponde à nos critères d’extension
   if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
     var reader = new FileReader();
 
     reader.addEventListener("load", function () {
       var image = new Image();
       image.height = 80;
       image.title = file.name;
       image.src = this.result;
       preview.appendChild( image );
     }, false);
 
     reader.readAsDataURL(file);
   }
 
 }
 
 if (files) {
   
   [].forEach.call(files, readAndPreview);
 }
  
 }
 </script>
      
</head>
<body>
    <input id="browse" type="file" onchange="previewFiles()" multiple />
    <iframe class="embed-responsive-item" src="http://localhost:7007/mapage/" width="500" height="500" id="myiframe" allowfullscreen ></iframe>

</body>
</html>

Sandeep Mewara

Не уверен в вашем вопросе точно, что вы пытаетесь сделать.

Если вы хотите перетащить и изменить размер изображения в iframe:
$("#myiframe").contents().find("#draggable").draggable({
iframeFix: true
}
);

Member 11837260

хорошо, спасибо, я буду тестировать и держать вас в курсе.

Member 11837260

У меня есть ошибка: $(...).contents(...).find(...).draggable - это не функция

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

0 Ответов