Window to select image from a location on the server

Question

Window to select image from a location on the server

Navigation

#1 by (1 votes)

1

My problem is this: I have a page where I must select an image to be displayed on the screen. These images are in a specific directory that will stay on the server. I am currently calling the images randomly and displaying on the screen, however, I want to call these images in a way that a window opens displaying the images from that directory so that I can choose the image and load the screen. The code for the js page is these:

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">
        <table width="400px" border="0">
            <tr>
                <td>
                    <input type="image" name="selectImage" src="../layout/imagens/Abrir.png" onClick="image()">
                </td>
            </tr>
        </table>
    </h1>
    <div id="image"></div>

O js:

function image() {
global_points = new Array();
global_effects = new Array();

random = Math.floor(Math.random() * (17 - 1) + 1);
img = new Image();
img.src = "../radiografias/" + random + ".jpg";
document.getElementById('image').innerHTML = "<img style=\" 
cursor:crosshair\" id='logo' href=\"#\" onmousedown= \"coordenadas(event)\" 
src=\"" +
    img.src + "\" width= 1050 />";
reset();
}

If someone can help me, thank you very much.

javascript

asked by anonymous 06.05.2018 / 00:39

1 answer

How to use Bootstrap 'shortcuts' in VSCode in .blade files? How do I avoid repeating commands through a function?

score 1 · Accepted Answer

You will need to create a function that will open the window that will display the images. When you click on an image, src will be sent to the image() function.

1st. Create the function

function abreJanela(){
   window.open("janela.php", "_blank", "width=600, height=400");
}

You can adjust the properties of the window as you see fit ( "width=600, height=400" ).

2nd. Change the onClick of input to the function to open the window:

onClick="abreJanela()"

3rd. Change the image() function to receive as a parameter the image clicked on the window and assign to img.src :

The function should look like this:

function image(imagem) {
   global_points = new Array();
   global_effects = new Array();

   img = new Image();
   img.src = imagem;
   document.getElementById('image').innerHTML = "<img style=\" cursor:crosshair\" id='logo' href=\"#\" onmousedown= \"coordenadas(event)\" src=\"" +       img.src + "\" width= 1050 />";
   reset();
}

Window

Create a file .php (in the example I named janela.php , but you use whatever name you want).

The window file should contain only the content below. The image styles (size, border color etc. you can adjust as you see fit):

<style>
img{
   height: 100px;
   margin: 5px;
   border: 2px solid #fff;
   cursor: pointer;
}

img:hover{
   border-color: #36F86A;
}
</style>


<?php
// loop para exibir as 17 imagens
for($x=1; $x<=17; $x++){
?>

<img src="../radiografias/<?php echo $x ?>.jpg">

<?php
}
?>

<script>
var imgs = document.querySelectorAll("img");

for(var x=0; x<imgs.length; x++){
   imgs[x].addEventListener("click", function(){

      window.opener.image(this.src); // envia para a função a imagem escolhida
      window.close(); // fecha a janela ao escolher uma imagem

   });
}
</script>