使用ajax在codeigniter中上传图片

Posted 2023-02-19

【中文标题】使用ajax在codeigniter中上传图片

【英文标题】：upload image in codeigniter using ajax

【发布时间】：2012-03-25 18:54:18

【问题描述】：

我在上传一些图片时遇到问题。所以...我有管理员端，我在其中单击“添加图像”按钮并开始添加图像。当我开始添加它们时，没有显示图像，以便我可以看到它。当我点击保存时，图像应该保存到某个位置。我的问题是：为什么我点击添加图片按钮后看不到我的图片？为什么图片没有保存在我指定的路径中？ 非常感谢！ 我还在这里添加了一些代码： 这是在我的控制器中：

public function showcase_image()
    try
                $config['upload_path'] = './resources/media/showcase/image/';
        $config['allowed_types'] = 'jpeg|png|jpg|flv|mp3|wav';
        $config['max_size'] = '10000';

        $this->load->library('upload', $config);

        $this->upload->do_upload('add_image');
        $data = $this->upload->data();

        $w = 720;
        $h = 425;

        $this->load->library('image_lib');
        $config['image_library'] = 'gd2';
        $config['source_image'] = $data['full_path'];
        $config['create_thumb'] = TRUE;
        $config['maintain_ratio'] = TRUE;
        $config['thumb_marker'] = '';
        $config['width'] = $w;
        $config['height'] = $h;


        $this->image_lib->initialize($config); 
        if($data['image_width']<425 && $data['image_height']<425)
        else
            $this->image_lib->resize();
        
        $file = $data['file_name'];

        echo json_encode(array("error"=>false,"msg"=>"success","file"=>$file,"dir"=>"image"));
    catch(Exception $e) 
        echo json_encode(array("error"=>true,"msg"=>$e->getMessage()));
    

这是在我的模型中：

公共函数 getShowcases()
        $query = $this->db->query("SELECT * FROM show ORDER BY show_id DESC");
        $result = $query->result();
        返回$结果；
    

    公共函数 getImagesShowcase($idShowcase)
        $query = $this->db->query("SELECT * FROM show_gallery WHERE show_gallery_project_id='".$idShowcase."' AND Showcase_gallery_type='image' ORDER BY show_gallery_index ASC");
        $result = $query->result();
        返回$结果；
    

在视图方面我有一些 ajax：

 函数 ajaxFileUploadImage()
    $("#loading")
        .ajaxStart(函数()
            $(this).show();
        )
        .ajaxComplete(函数()
            $(this).hide();
        );
    $.ajax文件上传
    (
        
            url:'=site_url('ajaxadmin/showcase_image')?>',
            安全URI：假，
            fileElementId:'add_image',
            数据类型：'json'，
            数据：，
            成功：功能（数据，状态）
            
                //jQuery('.thumb_file').attr('src','=base_url()?>resources/media/our_work/thumb/'+data.file);
                //jQuery('input[name=thumb]').val(data.file);
                变种图像='\
                 \
                     \
                         \
                     \
                    resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/> \
                     \
                         \
                         \
                     \
                     \
                 \
                ';
                jQuery('#showcase_image').append(jQuery(image));
            ,
            错误：函数（数据，状态，e）
                jQuery('.response_mes').html('* 请稍后再试！');
            
        
    )
    返回假；

我希望这段代码会很有用，如果有人有灵魂，也许会很棒。：D

【参考方案1】：

如何使用 ajax 上传图片的示例。我想这会对你有所帮助。

<script type="text/javascript">
		$(document).ready(function()
			$("#upfile1").click(function () 
    $("#file1").trigger('click');
		);

		var input = document.querySelector('input[type=file]'); 
		input.onchange = function () 
		var file_data = $("#file1").prop("files")[0]; // Getting the properties of file from file field
  	var form_data = new FormData(); // Creating object of FormData class  	
  	form_data.append("file", file_data)
		 var filevalue = $("#file1").val();
		 console.log(form_data);

    $.ajax(
    		url:'index.php/welcome/uploadImage',
    		type:'POST',
    		data : form_data,
    		cache: false,
        contentType: false,
        processData: false,
    		success:function( data )
    		
    			console.log(data);
    		,
    		error:function( error )
    			console.log(error);
    		
    );	
  	
);

<input type="file" id="file1" name="image" value=""  accept="image/*" capture style="display:none"/>
<img src="http://macgroup.org/blog/wp-content/uploads/2011/10/iphone-camera-icon-150x150.jpg" id="upfile1" style="cursor:pointer" />

【参考方案2】：

我假设您正在使用 here 找到的 jQuery AjaxFileUpload 插件，该插件使用“iFrame”上传技巧。如果浏览器支持，您应该尝试使用来自 valums 的qqFileUploader 进行上传，如果浏览器支持它，则使用 iFrame 进行上传，并在必要时回退到 iFrame。我相信这是通过 AJAX 上传的一种更好的方式，并且会更容易实现。

【讨论】：

但是使用 ajaxfileupload 我不能解决这个问题吗？问题是，在我必须上传项目的一部分中，它运行良好，而当我尝试加载照片以进行展示时，它却没有。我尝试将代码从一个部分复制到另一个部分，但得到了相同的结果

我同意你应该能够使用你现有的代码库让它工作。您是否检查了进入 CodeIgniter 的 $_POST 数组的内容，以确保所有文件上传细节都是正确的？