Php Codeigniter Ajax上传图像

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

我的想法是，我有一个图像上传表单。我试图用Ajax动态地完成它，但它似乎根本不起作用。我用php尝试了非动态版本，效果非常好，我的图像在我的文件夹中，我没有问题

我尝试了5或6个插件，但没有结果，这当然是我的错，但我不知道我在哪里犯了错误

上载

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

我不能像我为jQuery编写的所有代码那样粘贴，但我确实需要帮助。我在上面已经两天了

谢谢您的帮助。

add\u bdd（）函数是否返回false

我使用CodeIgnitor来做这件事，我发现您指定的过滤器通常是您无法上传文件的原因。如果（$this->upload->do_upload（））为false，则应在

部分添加更多代码，并使用以下命令打印调试代码：

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

有关更多信息，请参见此处：

请记住，如果您是通过AJAX调用它，您将需要一种方法来查看调试结果，例如将echo'ed调试结果打印到调用页面上的HTML元素中。您还可以使用Firebug之类的工具打印iformation。
没有Javascript代码，几乎没有人能为您做什么

查看您所追求的基本思想的深度，以便更好地理解、调试和调整代码

另外，我几乎不使用jQuery插件，因为我发现编写一个更适合我当前项目需要的插件更容易，所以我不能推荐任何插件。
谢谢你的帮助，我更改了脚本的动态，因此现在，它与我必须做的工作完美配合

下面是我的上传系统的脚本：




首先包括：

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

var uploader=新的plupload.uploader({
运行时：“gears、html5、flash、silverlight、browserplus”，
浏览按钮：“用户文件”，
容器：'容器'，
最大文件大小：“3mb”，
url:'yourUploadFunctionCI'，
flash_swf_url:'plugins/plupload/js/plupload.flash.swf'，
silverlight_xap_url:'plugins/plupload/js/plupload.silverlight.xap'，
过滤器：[
{标题：“图像文件”，扩展名：“jpg，jpeg，jpg，jpeg，tiff，png”}，
]
});
uploader.bind（'Init'，函数（up，params）{
});
$（“#上载文件”）。单击（函数（e）{
uploader.start（）；
e、 预防默认值（）；
});
uploader.init（）；
uploader.bind（'FilesAdded'，函数（up，files）{
$.each（文件、函数（i、文件）{
$（'#文件列表'）.html（“”）；
$（'#文件列表'）。追加(
'' +
file.name+'（'+plupload.formatSize（file.size）+'）”+
'');
});
up.refresh（）；
});
uploader.bind（'UploadProgress'，函数（up，file）{
$（'#'+file.id+“b”）.html（file.percent+“%”）；
});
uploader.bind（'Error'，函数（up、err、msg、file）{
$（“#文件列表”）.append（“错误：+err.code+
，消息：“+err.Message”+
（err.file？”，文件：“+err.file.name:”）+
""
);
日志（msg、up、err）；
up.refresh（）；
});
uploader.bind（'fileupload'，函数（up、file、response）{
$（'#'+file.id+“b”）.html（“100%”）；
var data=jQuery.parseJSON（msg.response）；
控制台日志（数据）；
});

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

祝你们今天愉快，希望能有所帮助

西蒙
我以正常方式上传时没有错误。我只需要一个插件与我的代码，我不知道我如何才能做到这一点。这真的很特别。如果你能给我一个ajax文件上传的例子，它可能会很有用。提前感谢您的帮助。谢谢您@Spyros的回答。我在周一尝试了你的教程，但它不起作用，因为jQuery是1.7版，而脚本可以运行到1.2版，所以你有一个错误。我找到了解决问题的办法。明天我将发布完整的代码并解释。（更加简单和最新）
<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>

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

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

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