Я хочу загрузить изображение с помощью ajax в php путем вызова функции php, а не файла - PullRequest
Новая
       3

Я хочу загрузить изображение с помощью ajax в php путем вызова функции php, а не файла

1 голос
/ 10 октября 2019

Я хочу загрузить изображение с помощью ajax, который работает хорошо. Но теперь я хочу использовать ajax, вызывая функцию php name.not имя файла 

<?php
    function upload(){
        if($_FILES["file"]["name"] != '')
        {
            $test = explode(".", $_FILES["file"]["name"]);
            $extension = end($test);
            $name = rand(100,999).'.'.$extension;
            $location = './upload'.$name;
            move_uploaded_file($_FILES["file"]["tmp_name"], $location);
            echo '<img src= "'.$location.'" height="150" width="225" class="img-thumbnail" />';
        }
    }
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" align="center">
        <label>select image</label>
        <input type="file" name="file" id="file" />
        <br/>
        <span id="upload_image"></span>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('change', '#file',function(){
                var property = document.getElementById("file").files[0];
                var image_name = property.name;
                var image_extension = image_name.split('.').pop().toLowerCase();
                if(jQuery.inArray(image_extension,['gif','png','jpg','jpeg']) == -1)
                {
                    alert("Invalid Image File");
                }
                var image_size = property.size;
                if(image_size > 2000000)
                {
                    alert("file size is very big");
                }
                else{
                    var form_data = new FormData();
                    form_data.append("file",property);
                    $.ajax({
                        url:"upload();",  //php function is here
                        method :"POST",
                        data:form_data,
                        contentType:false,
                        cache:false,
                        processData:false,
                        beforeSend:function(){
                            $('#upload_image').html("<label class='text-success'>Image upload...</label>");
                        },
                        success:function(data)
                        {
                            $('#upload_image').html(data);
                        }
                    })
                }
            });
        });
    </script>

</body>
</html>

теперь мой рабочий код ajax находится здесь:

index.php 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" align="center">
        <label>select image</label>
        <input type="file" name="file" id="file" />
        <br/>
        <span id="upload_image"></span>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('change', '#file',function(){
                var property = document.getElementById("file").files[0];
                var image_name = property.name;
                var image_extension = image_name.split('.').pop().toLowerCase();
                if(jQuery.inArray(image_extension,['gif','png','jpg','jpeg']) == -1)
                {
                    alert("Invalid Image File");
                }
                var image_size = property.size;
                if(image_size > 2000000)
                {
                    alert("file size is very big");
                }
                else{
                    var form_data = new FormData();
                    form_data.append("file",property);
                    $.ajax({
                        url:"upload.php",
                        method :"POST",
                        data:form_data,
                        contentType:false,
                        cache:false,
                        processData:false,
                        beforeSend:function(){
                            $('#upload_image').html("<label class='text-success'>Image upload...</label>");
                        },
                        success:function(data)
                        {
                            $('#upload_image').html(data);
                        }
                    })
                }
            });
        });
    </script>

</body>
</html>

upload.php 

<?php

if($_FILES["file"]["name"] != '')
{
    $test = explode(".", $_FILES["file"]["name"]);
    $extension = end($test);
    $name = rand(100,999).'.'.$extension;
    $location = './upload'.$name;
    move_uploaded_file($_FILES["file"]["tmp_name"], $location);
    echo '<img src= "'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>

Есть ли способ загрузить изображение с помощью функции php name.so не нужно создавать отдельныйphp файлы для каждого кода ajax

1 Ответ

0 голосов
/ 10 октября 2019

Вы не можете в своей функции javascript / ajax использовать имя функции PHP в качестве URL-адреса или цели запроса, поэтому это не будет работать: 

$.ajax({
    url:"<?php upload();?>", // or anything similar
    method :"POST"
    /* etc */

Однако вы можете использовать один PHPфайл для обработки нескольких различных запросов AJAX и разветвления логики на основе некоторого параметра, отправленного в запросе.

Например, добавьте в запрос новый параметр с именем "action" - присвойте ему уникальное значение 

var form_data = new FormData();
    form_data.append("file", property );
    form_data.append("action","xhr-upload-image");

/* ... rest of ajax code ... */

В сценарии PHP для обработки запросов AJAX: 

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING );

        if( $action ){
            switch( $action ){
                case 'xhr-file-upload':
                    upload();   // here you can call a specific PHP function
                break;
                case 'std-file-upload':/* code */break;
                case 'add-hot-water':/* code */break;
            }
        } else {
            exit('Missing action');
        }
    }

?>

Если, однако, цель состоит в том, чтобы использовать одну функцию для обработки различных загрузок (например, изменить разрешенные типы файлов, размер, местоположение и т. Д.)) затем либо напишите функцию, принимающую аргументы для этих переменных, либо напишите класс и вызовите его с другими свойствами. 

function upload($path,$maxsize,$types=array(),$rename){
    ....
}

или 

class uploadfile{
    private $options;

    public function __construct( $options=array() ){
        $this->options=(object)array_merge( array(
            'fieldname'     =>  'usrfile',
            'rename'        =>  false,
            'path'          =>  'uploads/',
            'size'          =>  abs( pow( 1024, 2 ) * 2 ),
            'types'         =>  ['jpg','png'],
            'enforcetype'   =>  true,
            'enforcesize'   =>  true
        ), $options );
    }

    public function upload(){
        try{

            $errors=array();

            $obj=(object)$_FILES[ $this->options->fieldname ];
            $tmp=$obj->tmp_name;
            $name=$obj->name;
            $size=$obj->size;
            $ext=pathinfo( $name, PATHINFO_EXTENSION );

            if( !is_uploaded_file( $tmp ) )$errors[]='Bad foo!';
            if( $this->options->enforcetype && !in_array( $ext, $this->options->types ) )$errors[]='bad file type';
            if( $this->options->enforcesize && $size >= $this->options->size )$errors[]='too large';
            /* etc */

            if( empty( $errors ) ){
                 $status=move_uploaded_file( $tmp, $this->options->path . $name );
                 return json_encode( array(
                    'name'      =>  $name,
                    'path'      =>  $this->options->path,
                    'size'      =>  $size,
                    'status'    =>  $status
                 ));
            }
            throw new Exception('Errors detected');
        }catch( Exception $e ){
            array_unshift( $e->getMessage() );
            exit( json_encode( $errors ) );
        }
    }
}

, а затем в сценарии upload.php- или как называется ваш обработчик ajax: 

if( $action ){
    switch( $action ){
        case 'xhr-file-upload':
            $obj=new uploadfile(array(
                'fieldname'     =>  'file',
                'path'          =>  'uploads/images/',
                'types'         =>  ['jpg','png','gif'],
                'enforcetype'   =>  true,
                'enforcesize'   =>  false
            ));
            exit( $obj->upload() );
        break;

        case 'xhr-pdf-upload':
            $obj=new uploadfile(array(
                'fieldname'     =>  'file',
                'path'          =>  'uploads/pdf/',
                'types'         =>  ['pdf'],
                'enforcetype'   =>  true,
                'enforcesize'   =>  false
            ));
            exit( $obj->upload() );
        break;
    }
}

Примечание: ни один код не был отлажен / протестирован! Надеюсь, что это поможет вам хоть что-то осветить.

...