Я создаю веб-сайт, который позволяет пользователям загружать изображения, а затем получать информацию EXIF, отображаемую в удобной для пользователя форме.
Я также хочу предоставить пользователям возможность иметь возможностьпокажи свою фотографию онлайн.
На данный момент у меня уже есть полностью готовый JavaScript для предварительного просмотра изображения: я выбираю изображение в форме, и оно появляется на веб-сайте ...
Теперь,после того, как пользователи загружают изображение в область предварительного просмотра, появляется кнопка, позволяющая пользователю загрузить изображение.
Дело в том, что я хочу, чтобы загрузка осуществлялась без обновления страницы ...
Я уже задавал вопрос об этом, и он был решен с помощью этого кусочка кода.на «голове» моей главной страницы, где форма:
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#form1').ajaxForm(function() {
alert("Image uploaded!");
});
});
</script>
Это работает ... Когда я нажимаю кнопку, чтобы загрузить изображение, оно действительно загружается, оно остается на странице спредварительный просмотр все еще находится в поле зрения, и отображается предупреждающее сообщение «Изображение загружено» ..
Проблема заключается в том, что в случае, если я выберу файл типа «.txt» и нажимаю, чтобы загрузить его, он по-прежнему будет отображать:", хотя он не загрузил его, потому что в файле PHP я проверяю тип файла перед его загрузкой, разрешая только .png и .jpg ...
Также будет сказано" изображение загруженоmsgstr "даже если я специально изменю свой PHP-файл с неверной информацией ... Так что, в основном.он ничего не проверяет ...
У меня также был кодированный PHP, чтобы показать сообщение в этой ситуации, говорящее "Только jpeg и png разрешены ..." ... Но это будет показано на пустом месте "после отправки "-page, конечно, чего я не хочу ...
Вопрос: поскольку этот фрагмент кода, использующий Ajax," переопределяет "сообщения об ошибках, присутствующие в моем PHP-кодеКак мне изменить его, чтобы оно отображало сообщение об ошибке, если оно не загружается?
Еще один способ проверить, является ли это изображение при кодировании.это может быть в области предварительного просмотра с помощью JavaScript, может быть?
Мой код JavaScript для загрузки изображения в «область предварительного просмотра»:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img1').attr('src', e.target.result);
}
//Mostrar a imagem e o mapa ao fazer o upload
var x = document.getElementById("itens");
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block";
}
var y = document.getElementById("exif");
if (window.getComputedStyle(y).display === "none") {
y.style.display = "block";
}
y.scrollIntoView(true); //Redireciona o ecrã para a imagem carregada
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
var botao = document.getElementById("upload_img");
var z = document.getElementById("link_foto");
botao.onclick = function() {
if (window.getComputedStyle(z).display === "none") {
z.style.display = "block";
}
}
Мой код PHP для загрузки изображения в папку ибаза данных:
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
$link = mysqli_connect("localhost","root","","geopic") or die("Error ".mysqli_error($link)); //ligação à base de dados e à tabela
// O array global PHP $_FILES permite o upload de imagens do computador para o servidor.
$image = $_FILES["imgInp"]["name"];
//devolve o nome da cópia temporária do ficheiro presente no servidor
$uploadedfile = $_FILES['imgInp']['tmp_name'];
//Devolve o tipo de ficheiro
$image_type =$_FILES["imgInp"]["type"];
if($_SERVER["REQUEST_METHOD"] == "POST")
{
//imagecreatefrompng — Cria uma nova imagem a partir do ficheiro porque não se sabe se o utilizador vai fazer o upload de um ficheiro com extensão permitida
if($image_type=='image/png' || $image_type=='image/x-png')
{
$src = imagecreatefrompng($uploadedfile);
}
elseif($image_type=='image/gif')
{
$src = imagecreatefromgif($uploadedfile);
}
elseif($image_type=='image/jpeg' || $image_type=='image/jpg' || $image_type == 'image/pjpeg')
{
$src = imagecreatefromjpeg($uploadedfile);
}else{
//se não for uma imagem mostra a mensagem e termina o script
exit ("Only jpeg and png allowed..." ) ;
}
//getimagesize() Esta função vai "buscar" o tamanho da imagem carregada. O tamanho original é necessário para realizar o "resize" na função"imagecopyresampled".
list($origWidth,$origHeight)=getimagesize($uploadedfile);
$maxWidth = 1280; //Define a largura máxima da imagem a guardar no servidor
$maxHeight = 800; //Define a altura máxima da imagem a guardar no servidor
if ($maxWidth == 0)
{
$maxWidth = $origWidth;
}
if ($maxHeight == 0)
{
$maxHeight = $origHeight;
}
// Calcula a rácio dos tamanhos máximos desejados e originais
$widthRatio = $maxWidth / $origWidth;
$heightRatio = $maxHeight / $origHeight;
// Rácio usada para calcular novas dimensões da imagem
$ratio = min($widthRatio, $heightRatio);
// Calcula as novas dimensões da imagem
$new_width = (int)$origWidth * $ratio;
$new_height = (int)$origHeight * $ratio;
// Função que serve para a imagem não perder qualidade perante o redimensionamento
$image_p=imagecreatetruecolor($new_width,$new_height);
// No caso da imagem ser PNG com fundo transparente, esta função mantém a transparência
imagealphablending($image_p, false);
imagesavealpha($image_p, true);
//Função que vai redimensionar a imagem
imagecopyresampled($image_p,$src,0,0,0,0,$new_width,$new_height,$origWidth,$origHeight);
//Vai gerar um nome para a foto com base na hora atual, para nunca existirem fotos com o mesmo nome
$temp = explode(".", $image);
$newfilename = round(microtime(true)) . '.' . end($temp);
$filepath = "http://localhost/geoPic/photos/".$newfilename;
// A função move_uploaded_file vai realizar o carregamento da foto para a pasta.
if(move_uploaded_file($_FILES["imgInp"]["tmp_name"], "photos/".$newfilename))
{
/*
$stmt = $link->prepare("INSERT INTO photo (name, path) VALUES (:name, :path)");
$stmt->bindParam(':name', $nome);
$stmt->bindParam(':path', $caminho);
// insert one row
$nome = $newfilename;
$caminho = $filepath;
$stmt->execute();
*/
$query_image = "insert into photo (name, path) values ('".$newfilename."', '".$filepath."')";
if(mysqli_query($link, $query_image)){
//$link_foto = mysqli_query($link,"SELECT path FROM carro WHERE name = $newfilename");
echo "Image uploaded";
}else{
echo "image not uploaded";
}
}
}
?>
Заранее спасибо ..
Вы, ребята, потрясающие и уже оказали мне важную помощь в разработке этого проекта!