编码重音和特殊字符PHP

Question

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!

Answer 1

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