I have a little problem with me php to upload imgs.
I'm making a website where a user may view a preview of the image that goes up, but if the image contains accents goes wrong such as "Nenúfares.jpg" becomes "Nenúfares.jpg.jpg"
How I can fix this?
Had thought about putting some method to select when an alert comes in. (JS) as containing special characters such as accents, etc ...
Mi Code
PHP:
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000000)
&& in_array($extension, $allowedExts))
{
$ruta ="tmp/".$_FILES["file"]["name"];
$rutafinal =str_replace(" ","_",$ruta); //Change " " for "_"
move_uploaded_file($_FILES["file"]["tmp_name"],$rutafinal);
echo $rutafinal;
}
else
{
echo "Archivo no valido";
}
JavaScript (AJAX):
function previewIMG() {
var formData = new FormData();
var file = $("#fileselectInput")[0].files[0];
formData.append("file", file);
formData.append("name", file.name);
var url ="subir_img_producto.php";
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var http = new XMLHttpRequest();
http.open("POST", url, true);
http.send(formData);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var result= http.responseText;
var comprobar= 'tmp';
if (result.indexOf(comprobar) !== -1) {
document.getElementById('cuadroIMG').src = http.responseText;
}else{
alert(http.responseText);
}
}
}
}
HTML:
<form id="form">
<input type="file" id="fileselectInput" onchange="previewIMG()"><br>
</form>
Thank you very much!
Apart from the utf-8 issue already covered nicely by Amauri, another thing you might want to do is this:
replace
$ruta ="tmp/".$_FILES["file"]["name"];
$rutafinal =str_replace(" ","_",$ruta); //Change " " for "_"
with
$ruta = "tmp/".$_FILES["file"]["name"];
$fileExtension = substr($ruta,stripos ($ruta,'.'));
$rutafinal = 'tmp/' . md5(time() . $ruta).'.'.$fileExtension;
This will create a md5 hash from the current timestamp and your filename as your new filename, thus giving you a better chance that your filename is unique on your system plus getting rid of "special chars".
One thing i like to do is also use the users unique id (if that exists) as an addition to prevent problems when two users upload the same file (might happen a lot with filenames like avatar.jpeg and such).
After all, md5 is not collision free so you might have to do some extra work here. One way to up your chances is to use timestamp driven directories as well:
$rutafinal = 'tmp/' . date("Y/m/d/h/i", time()) . '/'. md5(time() . $ruta).'.'.$fileExtension;
This would, as an example, put your file in
<yourimageuploadfolder>/2014/04/10/14/04/5eb63bbbe01eeed093cb22bb8f5acdc3.jpg
You could iterate and replace accents by normal chars:
$name = str_replace("ú", "u", $name);
Are you using UTF-8 or ISO-8859-1? You need to use the same encoding of your database. Let's suppose that your page is UTF-8 and your Database is Latin-1 (ISO 8859-1 / 2), you need to convert the data using utf8_encode .
I think that you can solve your encode problem forcing you header like:
header('Content-type: text/html; charset=utf-8');
Yesterday I solved my encode problem like this.
Hope it helps.