English 中文(简体)
代码 Ajax 上传图像
原标题:Codeigniter Ajax Upload image

我正和CocIgniter一起为我的学校项目开发一些表格。

想法是,我有一个带有图像上传的表。 我试图与 Ajax 动态地做它, 但似乎完全行不通。 我尝试了无动力的php 版本, 效果很好, 我的图像在我的文件夹里, 我对它没有异议 。

我试了5或6个插座,没有结果,这当然是我的错,但我不知道我在哪里犯错。

& lt; - - 控制器 - & gt;

if($result = $this->images_model->add_bdd())
{   
    $data[ uploaded ] = $result;
    $data[ message_upload ] =  Image uploader avec succès. ;                            
    $this->template->set_title( Upload successful );
    $this->template->view( add_places ,$data);
}
else
{   
    $this->template->set_title( Upload failed );
    $this->template->view( add_places );
}

& lt;- 模式- & gt;

function add_bdd()
{
    $config = array(
                 allowed_types  =>  jpg|jpeg|tiff ,
                 upload_path  => $this->gallery_path,
                 max_size  => 2000,
                 remove_spaces  => TRUE,
                 overwrite  => FALSE
            );

    $this->load->library( upload ,$config);
    if ($this->upload->do_upload())
    {

        $data_img = $this->upload->data();
        $exif = $this->exif_extractor->coords($data_img[ full_path ]);
        $data = array(
                 titre  =>  titlecontent ,
                 url  => base_url( images/ .$data_img[ file_name ]),
                 url_min  => base_url( images/ .$data_img[ raw_name ]. _min .$data_img[ file_ext ]),
                 alt  =>  cover_contentName ,
                 id_users  => $this->session->userdata( id ),
                 date_upload  => date( Y-m-d H:m ),
                 date_modified  => date( Y-m-d H:m ),
                 lat  => $exif[0],
                 long  => $exif[1],
                );
        $this->db->insert( pictures ,$data);
        return $exif;
    }
    else
    {
        return false;
    }
}

& lt;- 视图- & gt;

<form action="http://localhost:8888/project/images/add" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="userfile" value="Image de couverture"  />
<button name="upload" type="button" id="upload">Upload</button>
<input type="submit" name="submit" value="Publish Place"  />
</form>

有人能给我一个 jQuery 插件, 来动态上传图像, 并将我想要返回的路径和其他数据发送回脚本吗?

我不能像为 JQuery 制作的所有代码一样粘贴, 但我真的需要帮助。 我已经两天了!

谢谢你的帮助

最佳回答

谢谢你的帮助,我改变了我对剧本的动态 所以现在,它与我必须做的完全吻合

我的上传系统有脚本 :

& lt;- VIEW( 上装入_ img)- & gt;

<div id="container">
<div id="filelist"></div>
<a href="http://localhost:8888/myproject/#" id="userfile" name="userfile">[Select files]      </a>    
<a href="http://localhost:8888/myproject/images/index#" id="uploadfiles">[Upload files]</a
</div>

& lt; - - ConTROLLER - & gt;

function index(){
    if($this->_access())
    {
        $this->template->add_include( js/jquery.js )
                       ->add_include( js/browserplus.js )
                       ->add_include( js/plugins/plupload/plupload.full.js )
                       ->add_include( js/imgfunc.js );
        $this->template->view( upload_img );
    }
    else
    {
        redirect(site_url());
    }
}

function upload_image_spot()
{
    if($query = $this->images_model->upload_image_spot())
    {
        echo json_encode($query);
    }
    else
    {
        echo $this->upload->display_errors(  ,   );
    }
}

& lt;- MODEL -- & gt;

   function upload_image_spot()
{
    $config[ upload_path ] = realpath(APPPATH.  ../images/spots );
    $config[ allowed_types ] =  jpg|jpeg|tiff|png ;
    $config[ max_size ] = 3062;
    $config[ encrypt_name ] = TRUE;
    $this->load->library( upload , $config);
    if($this->upload->do_upload( file )) 
    // file means the file send to the website for upload, this is the name of field for Plupload script
    {
    $data_img = $this->upload->data();
    $copies = array(
            array( dir  =>  images/spots/large/ ,  x  => 1000,  y  => 600),
            array( dir  =>  images/spots/thumb/ ,  x  => 100,  y  => 60)
    );

    $this->copies($data_img,$copies);

    return  whatever ; // Not real data, I don t wanna post them here
    }
}

< -- JS- SCRIPTS -- & gt;

首先包括:

- J 查询

- 浏览器插件

- Plup 加载

("http://www.plupload.com/example_custom.php" rel=“no follow” >Plupload Script )

现在在空文件中添加此脚本 :

var uploader = new plupload.Uploader({
    runtimes :  gears,html5,flash,silverlight,browserplus ,
    browse_button :  userfile ,
    container :  container ,
    max_file_size :  3mb ,
    url :  yourUploadFunctionCI ,
    flash_swf_url :  plugins/plupload/js/plupload.flash.swf ,
    silverlight_xap_url :  plugins/plupload/js/plupload.silverlight.xap ,
    filters : [
        {title : "Image files", extensions : "jpg,jpeg,JPG,JPEG,tiff,png"},
    ]
});

uploader.bind( Init , function(up, params) {
});

$( #uploadfiles ).click(function(e) {
    uploader.start();
    e.preventDefault();
});

uploader.init();

uploader.bind( FilesAdded , function(up, files) {
    $.each(files, function(i, file) {
        $( #filelist ).html("");
        $( #filelist ).append(
             <div id="  + file.id +  ">  +
            file.name +   (  + plupload.formatSize(file.size) +  ) <b></b>  +
         </div> );
    });

    up.refresh();
});

uploader.bind( UploadProgress , function(up, file) {
    $( #  + file.id + " b").html(file.percent + "%");
});

uploader.bind( Error , function(up, err, msg,file) {
    $( #filelist ).append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );
    console.log(msg,up,err);
    up.refresh();
});

uploader.bind( FileUploaded , function(up, file,response) {
    $( #  + file.id + " b").html("100%");
    var data = jQuery.parseJSON(msg.response);
    console.log(data);
});

做你自己的定制,这样的话, 不需要额外的脚本, 就像您在网站上看到一样, 复制/ paste 全部脚本从 php 文件到控制器, 只要在 do_ upload 中添加文件, 一切都会正常的!

祝你们有愉快的一天 希望有帮助

西蒙 西蒙

问题回答

添加_bdd () 函数返回假吗?

我使用 CodeIgnitor 来做这件事, 我发现您指定的过滤器通常是您不上传文件的原因。 您应该在 < code> if ($This- gt; upload- gt; do_upload ()) 是假的章节中添加更多的代码, 并使用以下方式打印调试代码 :

echo $this->upload->display_errors();

更多信息请见此:http://codigniter.com/user_guide/libraris/files_uploading.html

请注意, 如果您通过 AJAX 调用此功能, 您需要一种方法来查看调试结果, 如将回声编辑调试结果打印到您的调用页面上的 HTML 元素。 您也可以使用 Firebug 等工具打印调试结果 。





相关问题
ajax login using httpRequest?

I am trying to develop my login script to give feedback to the user if the login is valid or not. Basically if it isn t correct a div box will show saying its wrong, if its correct it will show its ...

Virtual Tour using sketch up, ajax, flash technologies

I want to know if there are existing technology that make your 3d models in sketch into virtual tours, using either Ajax or Flash for web presentation. If there s none, which will be a good approach ...

How can i update div continuously

I have asp.net application where i have a div which showing the value from other site. The value of that site is changing continuously. I want that my div will automatically update in some interval ...

热门标签