Загрузка PHP, JSON и jQuery
В течение самого долгого времени я использовал очень стандартный HTML-пост в своем скрипте загрузки PHP для загрузки изображений. Я хотел попробовать что-то новое, отправив изображение в скрипт PHP uplaod через jQuery/JSON. Все текстовые данные на моем сайте отправляются через это, и я хотел попробовать загрузить изображения для работы с jQuery. Я погуглил, но нашел только готовые сценарии, ни у кого никогда не было учебника по самостоятельному созданию или с чего начать, нет ничего плохого в использовании готовых сценариев, но много раз я не могу заставить его работать с моим сайтом или стилизовать его так, чтобы он вписывался, поэтому я начал писать что-то быстрое, не могли бы вы, ребята, сказать мне, сработает ли это, если изображение не является текстовыми данными?
Мой HTML:
<div class="upload_box_logged">
<input type="file" id="file_up"><br />
<button id="up_btn">Upload</button>
<em style="display:none; color:red;" id="no_file" >Please Select a File!</em>
<em style="display:none; color:red;" id="up_fail" >Failed!</em>
<em style="display:none; color:red;" id="up_success" >Success!</em>
</div>
Мой jQuery:
$('#up_btn').click(function(){
var fileCheck = $('#file_up').val();
if(fileCheck == '')
{
$('#no_file').fadeIn();
}
else
{
var file_upVar = encodeURIComponent($('#file_up').val());
$.ajax({
type: 'POST', url: 'upload.php', dataType: "json", data: { file_up: file_upVar },
success: function(result) {
if (!result.success) { $('#up_fail').fadeIn().fadeOut(5000); }
else { $('#up_success').fadeIn().fadeOut(5000); }
}
});
}
});
Теперь вот мой PHP-файл, который я использую со своим стандартным методом HTML post to PHP:
$file_name = $HTTP_POST_FILES['ufile1']['name'];
$file_name_for_db = ($HTTP_POST_FILES['ufile1']['name']);
$new_file_name = $id."_pic1_".$file_name;
$allowedTypes = array("image/jpg", "image/jpeg", "image/png");
$maxSize = 5 * 1024 * 1024; // 3Mb
$fileType = $HTTP_POST_FILES['ufile1']["type"];
$fileSize = $HTTP_POST_FILES['ufile1']["size"];
// check if there was an error
if ($HTTP_POST_FILES['ufile1']["error"] > 0)
{
die($HTTP_POST_FILES['ufile1']["error"]);
}
// check if the filetype is valid
if (!in_array($fileType, $allowedTypes))
{
die("Invalid file type: $fileType");
}
// check if the size doesn't exceed the limitations
if ($fileSize > $maxSize)
{
die("The file was too big: $fileSize");
}
$name = $HTTP_POST_FILES['ufile1']["name"];
$tmpfile = $HTTP_POST_FILES['ufile1']["tmp_name"];
// check if the filename is valid
if (preg_match("/[\w-]+\.(jpg|jpeg|png)$/", $name) != 1)
{
die("Invalid file name: $name");
}
$path = "../pic/";
move_uploaded_file($tmpfile, $path);
Очевидно, мне придется декодировать сообщение чем-то вроде этого.. ну, я бы так и сделал, если это правильный путь это.
$uploaded_file = htmlspecialchars(trim(urldecode($_POST['file_up'])));
Ну, вот как бы я это сделал, если бы это был текст. Как я могу сделать это с данными изображения?
Огромное спасибо - Майк
3 answers
К сожалению, я не верю, что есть способ публиковать изображения и файлы через Ajax.
В прошлом я обычно делал это так: создавал скрытый iframe и делал форму целевой для имени iframe.
Таким образом, пример будет выглядеть так:
<form name="imageform" method='POST' action="upload_image.php" target="image_upload_frame" enctype="multipart/form-data">
...
</form>
<iframe name="image_upload_frame" height="1" width="1" style="visibility: hidden"></iframe>
Вы могли бы использовать это: https://developer.mozilla.org/En/DOM/Window.btoa - Отлично работает для каждого Firefox (самый используемый браузер на земле!;))
Использование iframe является распространенным и кроссбраузерным способом загрузки файлов в AJAX. Существует множество интересных ресурсов: