Как загрузить изображение и переместить в папку с помощью jquery?

Question

Вид:

<script>
    $("#team_image").change(function(){
        var file_data = $('#team_image').prop('files')[0];
        var member_name = $("#member_name").val();   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        $('#imgs').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
        $.ajax({
            url: '<?php echo base_url(); ?>upload',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
                $("#imgs").html(php_script_response);
            }
        });
    });
</script>
<input id="team_image" type="file" name="team_image" />
<input id="member_name" type="text" name="member_name" />

Контроллер:

public function upload()
{   
    if ( 0 < $_FILES['file']['error'] ) 
    {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else 
    {
        $filename = $_FILES['file']['name'];
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        $allowed = array("jpg", "jpeg", "png");
        if(!in_array($ext, $allowed)) 
        {
           echo '<p id="red">Only jpg, jpeg, and png files are allowed.</p>';
        }
        else
        {
            $data = array(
                            'member_name'=>$this->input->post('member_name'),
                            'team'=>$filename
                        );
            $sql = $this->db->insert('team',$data);
            move_uploaded_file($_FILES['file']['tmp_name'], ''.FCPATH.'image/team_image/'.$_FILES['file']['name']);
            if($sql==true)
            {
                echo '<p style="color:green;font-weight:bold;">File uploaded Successfully</p>';
            }
            else
            {
                echo '<p id="red">Unable to proceed!</p>';
            }
        }
    }
}

В этом коде у меня есть два простых файла, т.е. type="file" and type="text".Теперь то, что я на самом деле хочу, когда я нажимаю type=" file" image and member_name, будет вставлено в базу данных, и изображение должно быть перемещено в папку.Я не знаю, где я делаю неправильно?Итак, как я могу это сделать?Пожалуйста, помогите мне.

Спасибо

Answer 1

Пожалуйста, измените код AJAX, не нужно использовать метод prop для получения файловых данных, с помощью метода FormData () он будет отправлять данные $ _POST & $ _FILES на сервер.Также используйте тег формы.

Пожалуйста, следуйте приведенному ниже коду: -

<script>
    $("#team_image").change(function(){
        var form_data = new FormData();                  
        $('#imgs').html("<img src='<?php echo base_url(); ?>resource/loading.gif' />");
        $.ajax({
            url: '<?php echo base_url(); ?>upload',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response){
              $("#imgs").html(php_script_response);
            }
        });
    });
</script>
<form method="post" enctype="multipart/form-data">
    <input id="team_image" type="file" name="team_image" />
    <input id="member_name" type="text" name="member_name" />
</form>

На стороне сервера (на PHP-скрипте) вы можете получать данные с помощью $ _FILES (Array) & $ _POST (Array).

Пожалуйста, используйте это.