0
made a javascript script to add and cut an image of an input, the same worked perfectly, the problem is when I try to do the same for another file that is loaded on the same page, the first script stops working and only the second works.
HTML first file
<div class="input-field col s12">
<img id="img" hidden="500px" src="#">
<input type="file" id="imagem" name="imagem" onchange="readURL(this,'mini_foto_new');"><br><br>
<input type="hidden" id="x" name="x" /><!--referente a posição do mouse-->
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><!-- referente a altura e largura da imagem-->
<input type="hidden" id="h" name="h" />
</div>
Javascript
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#img').hide();
});
function readURL(input)
{
$('#img').show();
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function(e)
{
$('#img').attr('src', e.target.result);
jQuery(function($) {
$('#img').Jcrop({
onSelect: exibePreview
});
});
}
reader.readAsDataURL(input.files[0]);
}
function exibePreview(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
}
$("#img").change(function() {
readURL(this);
});
</script>
HTML second file
<div class="input-field col s12">
<img id="img" hidden="500px" src="#">
<input type="file" id="imagemEditar" name="imagemEditar" onchange="readURL(this,'mini_foto_new2');"><br><br>
<input type="hidden" id="x2" name="x2" /><!--referente a posição do mouse-->
<input type="hidden" id="y2" name="y2" />
<input type="hidden" id="w2" name="w2" /><!-- referente a altura e largura da imagem-->
<input type="hidden" id="h2" name="h2" />
</div>
Javascript
<script type="text/javascript">
$(document).ready(function()
{
$('#imgEditar').hide();
});
function readURL(input)
{
$('#imgEditar').show();
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function(e)
{
$('#imgEditar').attr('src', e.target.result);
jQuery(function($) {
$('#imgEditar').Jcrop({
onSelect: exibePreview
});
});
}
reader.readAsDataURL(input.files[0]);
}
function exibePreview(c)
{
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w2').val(c.w2);
$('#h2').val(c.h2);
}
}
$("#imgEditar").change(function() {
readURL(this);
});
</script>
You have created two functions with the same name and number of parameters.
– Paulo Dos Santos
It really was that same, had not been warning me obg
– Reignomo