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()));
    }
}




This is in my model:



public function getShowcases(){
        $query = $this->db->query("SELECT * FROM showcase ORDER BY showcase_id DESC");
        $result = $query->result();
        return $result;
    }

    public function getImagesShowcase($idShowcase){
        $query = $this->db->query("SELECT * FROM showcase_gallery WHERE showcase_gallery_project_id='".$idShowcase."' AND showcase_gallery_type='image' ORDER BY showcase_gallery_index ASC");
        $result = $query->result();
        return $result;
    }


And on the view side I have some ajax:

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()));
    }
}

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

Answer 1

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

Answer 2

如何使用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" />

使用ajax在codeigniter中上传图像

2 个答案: