使用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())); } }
 This is in my model:
 

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 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:


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

在視圖方面，我有一些 ajax：

 函數 ajaxFileUploadImage(){\n     $("#loading")\n         .ajaxStart(function(){\n             $(this).show();\n         })\n         .ajaxComplete(函數(){\n             $(this).hide();\n         });\n     $.ajax文件上傳\n     (\n         {\n             url:'<?=site_url('ajaxadmin/showcase_image')?>',\n            安全：假，\n             fileElementId:'add_image',\n            數據類型：'json'，\n            數據：{}，\n            成功：功能（數據，狀態）\n             {\n                 //jQuery('.thumb_file').attr('src','<?=base_url()?>resources/media/our_work/thumb/'+data.file);\n                 //jQuery('input[name=thumb]').val(data.file);\n                 var 圖像 = ' \\\n                 <div class="list" style="float:left;position:relative;margin-left:10px;margin-top:10px;"> \\\n                     <div class="description_img"> \\\n                         <div class="delete_img"></div> \\\n                     </div> \\\n                     <img height="100" src="<?=base_url()?>resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/> \\\n                     <div class="move_arrows"> \\\n                         <div class="move_on_left"></div> \\\n                         <div class="move_on_right"></div> \\\n                     </div> \\\n                     <input type="hidden" name="image_filename[]" class="image_filename" value="'+data.file+'"/> \\\n                 </div> \\\n                 ';\n                 jQuery('#showcase_image').append(jQuery(image));\n             },\n            錯誤：函數（數據，狀態，e）{\n                 jQuery('.response_mes').html('<span class="red">*請稍后再試！</span>');\n             }\n         }\n     )\n    返回假；\n }\n

我希望這段代碼會有用，也許如果有人有靈魂會很棒。：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

我假設您正在使用此處找到的 jQuery AjaxFileUpload 插件，該插件使用“iFrame”上傳技巧。 你應該嘗試使用qqFileUploader從使用純AJAX valums上傳瀏覽器是否支持它，並在必要時倒在iFrame中。 我相信這是通過 AJAX 上傳的一種更好的方式，並且更容易實現。