使用Codeigniter上传Ajax文件

Question

使用Codeigniter上传Ajax文件

Sar*_*rah 1 php ajax jquery codeigniter file-upload

我正在尝试使用codeigniter和ajax上传图像.我已经有了ajax方法将字段值插入数据库,这是上传文件最简单最简单的方法.这是JQuery自定义函数:

(function($){
    jQuery.fn.ajaxSubmit =
        function() {
            $(this).submit(function(event) {
                event.preventDefault();
                var url = $(this).attr('action');                       
                var data = $(this).serialize();

                $.ajax({
                    url: url,
                    type: "POST",
                    data: data,
                    dataType: "html",
                    success: function(msg) {
                               $('#main').html(msg);
                             }
                       });

                 return this;
             });
         };
})(jQuery);

Run Code Online (Sandbox Code Playgroud)

我称之为:

$(document).ready(function() {    
    $('#myForm').ajaxSubmit();
});

Run Code Online (Sandbox Code Playgroud)

该功能工作正常,数据插入数据库,我甚至有一些目录,在上传图像之前在模型中创建,它们被创建但图像根本没有上传.

我知道我需要使用隐藏的Iframe来完成这项工作,但我不知道如何将其集成到我的代码中.

Answer 1

Mad*_*ota 12

我使用CodeIgniter,jQuery和Malsup表单插件创建了自定义Ajax文件上传器.这是HTML和Javascript/CSS代码.它还支持多个文件上传和进度.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ajax UP Bar</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
        <script type="text/javascript">
            $(document).ready( function() {
                $('form').submit( function() {
                    var bar = $('.bar');
                    var percent = $('.percent');
                    var status = $('#status');
                    $(this).ajaxForm({
                        beforeSend: function() {
                            status.html();
                            var percentVal = '0%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        uploadProgress: function(event, position, total, percentComplete) {
                            var percentVal = percentComplete + '%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        complete: function(xhr) {
                            status.html(xhr.responseText);
                        }
                    });
                });
            });
        </script>
    </head>

    <body>

        <form method="post" action="<?php echo base_url('users/upload/'); ?>" enctype="multipart/form-data">
            <label for="upload">Select : </label>
            <input type="file" name="upload[]" id="upload" multiple="multiple" />
            <input type="submit" name="fsubmit" id="fsubmit" value="Upload" />
        </form>

        <div class="progress">
            <div class="bar"></div >
            <div class="percent">0%</div >
        </div>

        <div id="status"></div>

    </body>
</html>
<style>
    body { padding: 30px }
    form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

    .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
    .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
    .percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>

Run Code Online (Sandbox Code Playgroud)

在CodeIgniter控制器中:

<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Users extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
    }

    public function upload()
    {
        if (isset($_FILES['upload']['name'])) {
            // total files //
            $count = count($_FILES['upload']['name']);
            // all uploads //
            $uploads = $_FILES['upload'];

            for ($i = 0; $i < $count; $i++) {
                if ($uploads['error'][$i] == 0) {
                    move_uploaded_file($uploads['tmp_name'][$i], 'storage/' . $uploads['name'][$i]);
                    echo $uploads['name'][$i] . "\n";
                }
            }
        }
    }

}

Run Code Online (Sandbox Code Playgroud)

希望这对你有所帮助.谢谢!!

好但是`ajaxForm`似乎不起作用我使用`ajaxSubmit`代替`e.preventDefault()`.剩下的就是天才 (3认同)

归档时间：	13 年，1 月前
查看次数：	14296 次
最近记录：	12 年，6 月前