Click here to Skip to main content
14,733,542 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.


What I have tried:

<!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>
Posted
Comments
Sandeep Mewara 28-Aug-20 1:35am
   
Not sure of your question exactly wht you are trying.

If you want to drag and resize image in iframe:
$("#myiframe").contents().find("#draggable").draggable({
iframeFix: true
}
);
Member 11837260 28-Aug-20 1:45am
   
ok thank you, i will test and keep you posted.
Member 11837260 28-Aug-20 1:53am
   
I have an error: $(...).contents(...).find(...).draggable is not a function

So, if I understood correctly I have to do a dragglable function?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900