如何使用jquery上传图像并在文件夹中移动?

时间:2018-11-23 06:32:49

标签: php jquery ajax codeigniter

查看:

<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时,我真正想要的东西将插入数据库,并且图像应移动到文件夹中。我不知道我在哪里做错了?那么,我该怎么做?请帮助我。

谢谢

1 个答案:

答案 0 :(得分:0)

请更改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(数组)和$ _POST(数组)来获取数据。

请使用这个。