AJAX jQuery Avatar Uploading

Question

Я пытался найти очень простой AJAX jQuery Avatar Uploading, который я могу использовать для моей страницы настроек, чтобы пользователи могли загружать аватар, и, к сожалению, я не могу их найти.

Это моя "функция" до сих пор для загрузки аватара

function uploadAvatar(){ 
    $('#avatarDialog').fadeIn(); 
    $('#avatarDialog').html("Logging in, please wait...."); 
    dataString = $('#avatarForm').serialize(); 
    var postURL = $('#avatarForm').attr("action"); 
    $.ajax({ 
     type: "POST", 
     url: site_url+"/libraries/ajax/image-upload.php", 
     data:dataString, 
     dataType:"json", 
     cache:false, 
     success:function(data){ 
      if(data.err){ 
       $('#avatarDialog').fadeIn(); 
       $('#avatarDialog').html(data.err); 
      }else if(data.msg){ 
       $('#avatarDialog').fadeIn(); 
       $('#avatarDialog').html(data.msg); 

       var delay = 2000; 
       window.setTimeout(function(){   
        location.reload(true); 
       }, delay); 
      } 
     } 
    }); 
    return false; 
}; 

Для моего HTML/Input это.

<form id="avatar_form" action enctype="multipart/form-data" method="post"> 
<input name="image_file" id="imageInput" type="file" /> 
<input type="submit" id="submit-btn" onClick="uploadAvatar();" value="Upload" /> 

И, наконец, это мой PHP код (я не имею ничего здесь)

$thumb_square_size  = 200; 
$max_image_size   = 500; 
$thumb_prefix   = "thumb_"; 
$destination_folder  = './data/avatars/'; 
$jpeg_quality   = 90; //jpeg quality 


$return_json = array(); 
if($err==""){ $return_json['msg'] = $msg; } 
else{ $return_json['err'] = $err; } 
echo json_encode($return_json); 
exit; 

Так как я начинаю это на самом деле. Я просто не знаю, с чего начать, я точно не знаю, что делать.

Answer 1

Bulletproof - это класс загрузки изображений PHP, который объединяет общие проблемы безопасности и практики, поэтому мы будем использовать его здесь, так как он также упрощает и упрощает весь процесс. Вы хотите прочитать одобренный ответ по этому вопросу здесь (https://security.stackexchange.com/questions/32852/risks-of-a-php-image-upload-form), чтобы лучше понять риски принятия загрузки файлов от пользователей.

Нижеприведенный PHP является основным и действительно обрабатывает загрузку изображения. Вы хотите сохранить путь или имя файла, которое было создано в базе данных или в каком-то хранилище, если изображение загружено успешно.

Вы также можете изменить каталог, в который загружается изображение. Для этого измените параметр для ->uploadDir("uploads") на какой-либо другой относительный или абсолютный путь. Это значение "uploads" загрузит изображение в каталог libraries/ajax/uploads. Если каталог не существует, пуленепробиваемый его сначала создаст.

Вам необходимо загрузить пуленепробиваемый (https://github.com/samayo/bulletproof) и не забудьте загрузить его или поместить в libraries/bulletproof/. Когда вы загружаете класс из github, он будет в ZIP-архиве. Извлеките zip-архив и переименуйте директиву bulletproof-master в простой пуленепробиваемый. Поместите этот каталог в каталог библиотек.

HTML

<form id="avatar_form" action enctype="multipart/form-data" method="post"> 
     <input name="image_file" id="imageInput" type="file" /> 
     <input type="submit" id="submit-btn" value="Upload" /> 
    </form> 

JS

$('#avatar_form').submit(function(event){ 
    event.preventDefault(); 
    var formData = new FormData($(this)[0]); //use form data, not serialized string 
    $('#avatarDialog').fadeIn(); 
    $('#avatarDialog').html("Logging in, please wait...."); 
    $.ajax({ 
     type: "POST", 
     url: site_url + "/libraries/ajax/image-upload.php", 
     data: formData, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(data){ 
      if(data.code != 200){ //response code other than 200, error 
       $('#avatarDialog').fadeIn(); 
       $('#avatarDialog').html(data.msg); 
      } else { // response code was 200, everything is OK 
       $('#avatarDialog').fadeIn(); 
       $('#avatarDialog').html(data.msg); 
       var delay = 2000; 
       window.setTimeout(function(){   
        location.reload(true); 
       }, delay); 
      } 
     } 
    }); 
    return false; 
}); 

PHP

//bulletproof image uploads 
    //https://github.com/samayo/bulletproof 
    require_once('../bulletproof/src/bulletproof.php'); 
    $bulletproof = new ImageUploader\BulletProof; 

    //our default json response 
    $json = array('code' => 200, 'msg' => "Avatar uploaded!"); 

    //if a file was submitted 
    if($_FILES) 
    { 
     try 
     { 
      //rename the file to some unique 
      //md5 hash value of current timestamp and a random number between 0 & 1000 
      $filename = md5(time() . rand(0, 1000)); 
      $result = $bulletproof->fileTypes(["png", "jpeg"]) //only accept png/jpeg image types 
        ->uploadDir("uploads") //create folder 'pics' if it does not exist. 
        ->limitSize(["min" => 1000, "max" => 300000]) //limit image size (in bytes) .01mb - 3.0mb 
        ->shrink(["height" => 96, "width" => 96]) //limit image dimensions 
        ->upload($_FILES['image_file'], $filename); // upload to folder 'pics' 

      //maybe save the filename and other information to a database at this point 

      //print the json output     
      print_r(json_encode($json));   
     } 
     catch(Exception $e) 
     { 
      $json['code'] = 500; 
      $json['msg'] = $e->getMessage(); 
      print_r(json_encode($json)); 
     } 
    } 
    else 
    { 
     //no file was submitted 
     //send back a 500 error code and a error message 
     $json['code'] = 500; 
     $json['msg'] = "You must select a file"; 
     print_r(json_encode($json)); 
    } 

Пуленепробиваемый сгенерирует исключение, если изображение не проходит проверочные тесты. Мы поймаем исключение в блоке catch try и вернем сообщение об ошибке обратно в JavaScript в возврате JSON.

Остальная часть кода очень хорошо комментируется на странице Bulletproof github и т. Д., Но прокомментируйте, если что-то неясно.