使用ajax在codeigniter中上传图片

Question

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

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

Answer 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" />

Answer 2

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