javascript — загрузка изображения с помощью переполнения стека ajax mysql
Я хочу попробовать загрузить изображение с помощью php и mysql. Я использую форму для отправки данных с помощью AJAX.
Мой HTML-код:
<input type="file" name="logo" id="logo" class="styled">
<textarea rows="5" cols="5" name="desc" id="desc" class="form-control"></textarea>
<input type="submit" value="Add" id="btnSubmit" class="btn btn-primary">
Код Ajax:
var formData = new FormData($("#frm_data")[0]);
$("#btnSubmit").attr('value', 'Please Wait...');
$.ajax({
url: 'submit_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
мой php код (submit_job.php):
$desc = mysqli_real_escape_string($con, $_POST['desc']);
$date = date('Y-m-d H:i:s');
$target_dir = "jobimg/";
$target_file = $target_dir . basename($_FILES["logo"]["name"]);
move_uploaded_file($_FILES["logo"]["tmp_name"], $target_file);
Решение
Попробуй это:
Jquery:
$('#upload').on('click', function() {
var file_data = $('#pic').prop('files')[0];
var form_data = new FormData(); // Create a FormData object
form_data.append('file', file_data); // Append all element in FormData object
$.ajax({
url : 'upload.php', // point to server-side PHP script
dataType : 'text', // what to expect back from the PHP script, if anything
cache : false,
contentType : false,
processData : false,
data : form_data,
type : 'post',
success : function(output){
alert(output); // display response from the PHP script, if any
}
});
$('#pic').val(''); /* Clear the file container */
});
Php:
<?php
if ( $_FILES['file']['error'] > 0 ){
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
{
echo "File Uploaded Successfully";
}
}
?>
Другие решения
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function (event) {
event.preventDefault();
var formdata = new FormData($('form')[0]);
var url = $("form").attr('action');
$.ajax({
url: url,
type: "POST",
data: formdata,
dataType: "json",
processData: false,
contentType: false,
success: function (data) {
console.log(data);
}
});
});
});
</script>
Безопасность является важной частью веб-дизайна. Попробуйте следующие проверки для большей безопасности.
Проверка файла в $ _FILES
if (empty($_FILES['image']))
throw new Exception('Image file is missing');
Проверка на ошибки загрузки
if ($image['error'] !== 0) {
if ($image['error'] === 1)
throw new Exception('Max upload size exceeded');
throw new Exception('Image uploading error: INI Error');
}
Проверка загруженного файла
if (!file_exists($image['tmp_name']))
throw new Exception('Image file is missing in the server');
Проверка размера файла
$maxFileSize = 2 * 10e6; // = 2 000 000 bytes = 2MB
if ($image['size'] > $maxFileSize)
throw new Exception('Max size limit exceeded');
Проверка изображения
$imageData = getimagesize($image['tmp_name']);
if (!$imageData)
throw new Exception('Invalid image');
Проверка MIME-типа
$mimeType = $imageData['mime'];
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($mimeType, $allowedMimeTypes))
throw new Exception('Only JPEG, PNG and GIFs are allowed');
Надеюсь, что это поможет другим создать скрипт загрузки PHP без проблем с безопасностью.
detector