Я застрял!! 🙁 Я хочу загрузить файл изображения с заголовком и заголовком, я хочу использовать javascript для проверки заголовка заголовка и выбранного файла.
Мой html идет сюда:
<input type="text" name="title2" id="title2" value="title" /><br /> <textarea cols="50" rows="10" name="caption" >caption goes here...</textarea><br /> <input type="file" name="photo" id="photo" /><br /> <button id="submit_info" onclick="photowcap()" >post</button><br /> и мой javascript здесь:
function photowcap() { var title = document.getElementsByName("title2")[0].value; var photo = document.getElementsByName("photo")[0].value; var captions = document.getElementsByName("caption")[0].value; var caption = encodeURIComponent(captions) var xmlhttp; if(title == "" || title == " " || title == "title") { document.getElementsByName("title2")[0].focus(); document.getElementsByName("title2")[0].value=""; return; } else if(captions == "" || captions == " " || captions == "caption goes here..."){ document.getElementsByName("caption")[0].focus(); document.getElementsByName("caption")[0].value=""; return; } else if(photo == ""){ alert("please choose image"); } else{ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { alert("Success!!!"); } } xmlhttp.open("GET","photowcap.php? title="+title+"&caption="+caption+"&photo="+photo,true); xmlhttp.send();} }
И для сохранения его с помощью php:
<?php include("admin_conn.php"); $title = $_GET["title"]; $caption = $_GET["caption"]; $photo = $_GET["photo"]; $time=time(); $date = (date("DF d Y",$time)); $query_photowcap = "INSERT INTO school_updates(title, photo, caption, date, time) VALUES('$title','$photo','$caption','$date','$time')"; mysql_query($query_photowcap); ?>в<?php include("admin_conn.php"); $title = $_GET["title"]; $caption = $_GET["caption"]; $photo = $_GET["photo"]; $time=time(); $date = (date("DF d Y",$time)); $query_photowcap = "INSERT INTO school_updates(title, photo, caption, date, time) VALUES('$title','$photo','$caption','$date','$time')"; mysql_query($query_photowcap); ?>
он сохраняет только путь к файлу как «C: fakepath / filename ….», потому что у меня нет идеи о том, как получить имя файла с помощью javascript, и, наконец, у меня есть этот код для сохранения фактического изображения в папке, но я не знаю действительно получаю, где я должен его разместить: СПАСИБО В ПРОДОЛЖЕНИИ 🙂
<?php error_reporting(0); $max_file_size = 200 * 1024; #200kb if (($_FILES["photo"]["type"] == "image/gif") || ($_FILES["photo"]["type"] == "image/jpeg") || ($_FILES["photo"]["type"] == "image/png" ) && ($_FILES["photo"]["size"] < $max_file_size)) { $path = 'images/' . uniqid(); move_uploaded_file($_FILES["photo"]["tmp_name"], $path.$_FILES["photo"]["name"]); } else { echo "Files must be either JPEG, GIF, or PNG and less than 200 kb"; } ?>
Чтобы получить доступ к файлам с $_FILES их необходимо отправить с заголовком содержимого и заголовком multipart/form-data и соответствующими атрибутами. К сожалению, вы не можете сделать это с помощью метода отправки xhr вручную, потому что отправка строки будет автоматически преобразована в UTF-8 . К счастью, вы все равно можете отправлять двоичные данные, такие как файл из window.File javascript.File.
Это не поддерживается в старых браузерах. Код будет выглядеть так:
var file = document.getElementById('photo').files[0]; ... xhr.send(file);
А затем на стороне сервера вам нужно будет получить доступ к входному буфере напрямую, чтобы захватить этот файл
$file = file_get_contents('php://input');
Если вы настаиваете на использовании $_FILES вы можете использовать объект FormData в javascript. Причина, по которой я оставил это в качестве второго варианта, – это то, что я слышал о проблемах с большей поддержкой, и я лично избегаю использовать его на данный момент.
var formData = new FormData(document.getElementById('theForm')); ... xhr.send(formData);
Прошло некоторое время с тех пор, как я опубликовал этот ответ, и теперь объект FormData широко поддерживается, если вы хотите загружать файлы вместе с другими данными, вы можете посмотреть на них.
Вы пытаетесь загрузить изображение с помощью ajax … короткий ответ … обычно вы не можете. Для загрузки вам нужны данные о multipart / form-data, что делает загрузку ajax болью.
Легкой работой было бы проверить форму с помощью js, а затем, как правило, отправить ее. Как здесь: Ajax Загрузить изображение – ну … игнорировать название, вводит в заблуждение.