Javascript 使用ajax在codeigniter中上载图像

Javascript 使用ajax在codeigniter中上载图像,javascript,ajax,codeigniter,Javascript,Ajax,Codeigniter,我上传一些图片有问题。所以…我有一个管理端,我点击添加图像按钮,开始添加图像。当我开始添加它们时,图像不会显示,以便我可以看到它。当我点击save时,图像应该保存到某个位置。我的问题是:为什么单击“添加图像”按钮后无法看到我的图像?为什么图片没有保存在我指定的路径中? 谢谢! 我还在这里添加了一些代码: 这在我的控制器中: 这在我的模型中: 在视图方面,我有一些ajax: 我希望这段代码会有用,如果有人有一个解决方案,可能会很棒。:D我假设您使用的是使用iFrame上传技巧找到的jQu

我上传一些图片有问题。所以…我有一个管理端,我点击添加图像按钮,开始添加图像。当我开始添加它们时,图像不会显示,以便我可以看到它。当我点击save时,图像应该保存到某个位置。我的问题是:为什么单击“添加图像”按钮后无法看到我的图像?为什么图片没有保存在我指定的路径中? 谢谢! 我还在这里添加了一些代码: 这在我的控制器中:

这在我的模型中:

在视图方面,我有一些ajax:


我希望这段代码会有用,如果有人有一个解决方案,可能会很棒。:D

我假设您使用的是使用iFrame上传技巧找到的jQuery AjaxFileUpload插件。您应该尝试使用from-valums,如果浏览器支持,它使用纯AJAX进行上传,如果需要,可以使用iFrame。我相信这是一种通过AJAX上传图像的好方法,而且更容易实现。

如何使用AJAX上传图像的示例。我想这会帮你的

$document.readyfunction{ $upfile1.clickfunction{ $file1。触发“单击”; }; var input=document.querySelector'input[type=file]; input.onchange=函数{ var file_data=$file1.propfiles[0];//从文件字段获取文件的属性 var form_data=new FormData;//正在创建FormData类的对象 form_data.appendfile,file_data var filevalue=$file1.val; console.logform_数据; $.ajax{ url:'index.php/welcome/uploadImage', 类型:'POST', 数据:表格数据, cache:false, contentType:false, processData:false, 成功:函数数据 { 控制台日志数据; }, 错误:函数错误{ console.logerror; } }; } };
但是使用ajaxfileupload,我不能解决这个问题吗?问题是,在我必须上传项目的一个部分,它工作得很好,而当我尝试为showcase加载照片时,它却不能。我试图将代码从一个部分复制到另一个部分,但得到了相同的结果。我同意您应该能够使用现有的代码库使其工作。您是否检查了进入CodeIgniter的$\u POST数组的内容,以确保所有文件上载详细信息都是正确的?
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()));
    }
}
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; } function ajaxFileUploadImage(){ $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); $.ajaxFileUpload ( { url:'<?=site_url('ajaxadmin/showcase_image')?>', secureuri:false, fileElementId:'add_image', dataType: 'json', data:{}, success: function (data, status) { //jQuery('.thumb_file').attr('src','<?=base_url()?>resources/media/our_work/thumb/'+data.file); //jQuery('input[name=thumb]').val(data.file); var image = ' \ <div class="list" style="float:left;position:relative;margin-left:10px;margin-top:10px;"> \ <div class="description_img"> \ <div class="delete_img"></div> \ </div> \ <img height="100" src="<?=base_url()?>resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/> \ <div class="move_arrows"> \ <div class="move_on_left"></div> \ <div class="move_on_right"></div> \ </div> \ <input type="hidden" name="image_filename[]" class="image_filename" value="'+data.file+'"/> \ </div> \ '; jQuery('#showcase_image').append(jQuery(image)); }, error: function (data, status, e){ jQuery('.response_mes').html('<span class="red">* please try again later!</span>'); } } ) return false; }