Долгое время я использовал очень стандартный HTML-пост в моем сценарии загрузки PHP для загрузки изображений. Я хотел попробовать что-то новое, отправив изображение в скрипт загрузки PHP через 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-сообщением для метода 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'])));

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

Большое спасибо -Майк

4
user1053263 10 Мар 2012 в 11:59

3 ответа

Лучший ответ

К сожалению, я не верю, что есть способ публиковать изображения и файлы через 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>
3
Tim 10 Мар 2012 в 08:30

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

2
Simon Strasser 10 Мар 2012 в 08:23

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

1
jpic 10 Мар 2012 в 08:29