0

我目前正在使用 CodeIgniter 为我的学校项目开发一些表格。

这个想法是我有一个带有图像上传的表单。我正在尝试使用 Ajax 动态地执行此操作，但它似乎根本不起作用。我用 php 尝试了非动态版本，它运行良好，我的图像在我的文件夹中，我没有问题。

我试了五六个插件都没有结果，这肯定是我的错，但我不知道我哪里做错了。

<---控制器--->

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

<--型号-->

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

<--查看-->

<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 制作的所有代码一样粘贴，但我真的需要帮助。我已经2天了！

谢谢你的帮助。

4

3 回答 3

0

add_bdd() 函数是否返回 false？

我已经使用 CodeIgnitor 来做这件事，我发现您指定的过滤器通常是您没有上传文件的原因。您应该在if ($this->upload->do_upload())为 false 的部分添加更多代码，并使用以下命令打印出调试代码：

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

有关更多信息，请参见此处：http: //codeigniter.com/user_guide/libraries/file_uploading.html

请记住，如果您通过 AJAX 调用它，您将需要一种查看调试结果的方法，例如将 echo'ed 调试结果打印到调用页面上的 HTML 元素。您还可以使用 Firebug 之类的工具打印信息。

于 2012-05-22T20:37:39.213 回答
0

如果没有 Javascript 代码，几乎没有人可以为您做任何事情。

查看Nettuts+ 上的本教程，深入了解您所追求的基本思想，以便您更好地理解、调试和调整您的代码。

此外，我几乎不使用 jQuery 插件，因为我发现编写一个更适合我当前项目需求的代码更容易，所以我不能推荐任何插件。

于 2012-05-23T13:20:49.097 回答
0

感谢您的帮助，我现在更改了脚本的动态，它与我必须做的事情完美配合。

我的上传系统有脚本：

<-- 查看 (upload_img)-->

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

<-- 控制器 -->

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

<-- 型号-->

   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脚本-->

首先包括：

-jQuery

-browserPlus

- 上传

（上传脚本）

现在将此脚本添加到一个空文件中：

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

做你自己的定制，就是这样，不需要额外的脚本，就像你在网站上看到的那样，将所有脚本从 php 文件复制/粘贴到控制器，只需在 do_upload 中添加“文件”，一切都会正常工作！

祝大家有个愉快的一天，希望对您有所帮助。

西蒙

于 2012-05-27T21:50:42.123 回答