Загрузка PHP, JSON и JQuery

В течение самого долгого времени я использую очень стандартное сообщение HTML для загрузки PHP script для загрузки изображения. Я хотел попробовать что-то новое, отправив изображение на PHP uplaod script через JQuery/JSON. Все текстовые данные на моем сайте отправляются через это, и я хотел попробовать и загрузить изображения для работы с JQUery. Я googled, но только нашел готовые сценарии, никто никогда не учился делать это самостоятельно или с чего начать, нет ничего плохого в использовании готовых скриптов, но много раз я не могу заставить его работать с моим сайтом или стилем так, чтобы он вписывался, поэтому я начал быстро писать что-нибудь, может, вы, ребята, скажите, будет ли это работать, если изображение не является текстовыми данными?

Мой HTML:

<div>

<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-сообщением для метода 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'])));

Хорошо, вот как бы я это сделал, если бы это был текст. Как я могу сделать это с данными изображения?

Спасибо кучу -Mike

3 ответа

К сожалению, я не верю, что есть способ отправлять изображения и файлы через Ajax.

Как я обычно делал это в прошлом, это создание скрытого iframe и создание формы, предназначенной для имени iframe.

Итак, пример будет выглядеть так:

<form name="imageform" method="POST" action="upload_image.php" target="image_upload_frame" enctype="multipart/form-data">
 ...
</form>


Вы можете использовать этот: https://developer.mozilla.org/En/DOM/Window.btoa - отлично работает для каждого Firefox (самый используемый браузер на земле!;))


Использование iframe - это общий и кросс-браузер способ загрузки файлов в AJAX. Есть много интересных ресурсов:

licensed under cc by-sa 3.0 with attribution.