Как загрузить изображение с помощью javascript, ajax и php

Question

Я хочу загрузить изображение в onchange файла типа ввода, используя AJAX. Я могу использовать только javascript, ajax и php.

Смотрите мой код:

index.html

<form id="myForm" action="" enctype="multipart/form-data"> 
<input type="file" name="imagefile" id="imagefile" onchange="uploadImage()"> 
</form> 

upoad.js

function uploadImage(){ 

    try { 
     ajpass = new XMLHttpRequest(); 
    } catch (e) { 
     ajpass = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
     ajpass.onreadystatechange = epasscheck2; 
     ajpass.open("post", "http://localhost/moodle/lib/editor/tinymce/plugins/moodleimage/upload.php", true); 

     ajpass.send(); 
} 
function epasscheck2() { 
    if ((ajpass.readyState == 4) && (ajpass.status == 200)) { 
     var restxt = ajpass.responseText; 
     alert(restxt); 
    } 
} 

upload.php

<?php 

    echo $_FILES["imagefile"]["name"]; //error here 

    //file upload code here 

?> 

Я получаю ошибку Undefined index imagefile в upload.php.

Мне не удалось передать свойства файла изображения (например, имя, размер, tmp_name и т. Д.) От upload.js до upload.php.

Answer 1

Вы можете использовать Dropzone вместо того чтобы изобретать колесо,

Вот ссылка: http://www.dropzonejs.com/#

Answer 2

использовать кодирование ниже, это поможет вам подтверждать файл

$(document).ready(function (e) { 
 
$("#form").on('submit',(function(e) { 
 
    e.preventDefault(); 
 
    $.ajax({ 
 
     url: "upload.php", 
 
    type: "POST", 
 
    data: new FormData(this), 
 
    contentType: false, 
 
     cache: false, 
 
    processData:false, 
 
    beforeSend : function() 
 
    { 
 
    //$("#preview").fadeOut(); 
 
    $("#err").fadeOut(); 
 
    }, 
 
    success: function(data) 
 
     { 
 
    if(data=='invalid file') 
 
    { 
 
    // invalid file format. 
 
    $("#err").html("Invalid File !").fadeIn(); 
 
    } 
 
    else 
 
    { 
 
    // view uploaded file. 
 
    $("#preview").html(data).fadeIn(); 
 
    $("#form")[0].reset(); 
 
    } 
 
     }, 
 
    error: function(e) 
 
     { 
 
    $("#err").html(e).fadeIn(); 
 
     }   
 
    }); 
 
})); 
 
});

<form id="form" action="upload.php" method="post" enctype="multipart/form-data"> 
 
    <input id="uploadImage" type="file" accept="image/*" name="image" /> 
 
    <input id="button" type="submit" value="Upload"> 
 
</form> 
 
<div id="err"></div>

вы должны создайте папку «upload».

<?php 

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions 
$path = 'uploads/'; // upload directory 

if(isset($_FILES['image'])) 
{ 
$img = $_FILES['image']['name']; 
$tmp = $_FILES['image']['tmp_name']; 

// get uploaded file's extension 
$ext = strtolower(pathinfo($img, PATHINFO_EXTENSION)); 

// can upload same image using rand function 
$final_image = rand(1000,1000000).$img; 

// check's valid format 
if(in_array($ext, $valid_extensions)) 
{  
    $path = $path.strtolower($final_image); 

    if(move_uploaded_file($tmp,$path)) 
    { 
    echo "uploaded"; 
    } 
} 
else 
{ 
    echo 'invalid file'; 
} 
} 

?>