jaxFileUpload插件异步上传图片

第一步：引入jquery文件和jaxFileUpload文件

文件位置：https://pan.baidu.com/s/1jHEyIyy

第二步，前端：

    <div class="form-group">

                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span class="text-danger"></span> 用户头像</label>

                    <div class="col-sm-9 col-xs-12">

                        <input type="file" name="avatar" id="avatar"  value=""/>

                        <input type="hidden" name="avatar_name" id="avatar_name"  value=""/>

                    </div>

                </div>

                <div class="form-group" id="img_form_group" style="<?php  if(!$member_common['avatar']){echo 'display:none';}?>">

                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span class="text-danger"></span> </label>

                    <div class="col-sm-9 col-xs-12">

                        <img width="100px;" <?php echo $member_common['avatar']?'src="/data/upload/member_avatar/'.$member_common['avatar'].'"':'';?> />

                    </div>

                </div>

    function ajaxFileUpload() {

        $.ajaxFileUpload

        (

            {

                url:'/index.php/admin/member/memberAjax?do=upload_avatar',

                secureuri:false,

                fileElementId:'avatar',

                dataType: 'json',

                success: function (data, status)

                {

                    if(data.code !=1){

                        layer.msg(data.msg);

                    }else{

                        $('input[name="avatar_name"]').val(data.data.avatar_name);

                        $("#img_form_group").find('img').attr('src',data.data.avatar_url);

                        $("#img_form_group").show();

                    }

                    $('input[name="avatar"]').bind('change',uploadChange);

                },

                error: function (data, status, e)

                {

                    layer.msg('上传失败');

                    $('input[name="avatar"]').bind('change',uploadChange);

                }

            }

        )

    }

    function uploadChange(){

        var filepatd=$("#avatar").val();

        var extStart=filepatd.lastIndexOf(".");

        var ext=filepatd.substring(extStart,filepatd.length).toUpperCase();

        if(ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){

            layer.msg("文件格式错误");

            $("#avatar").attr('value','');

            return false;

        }

        if ($("#avatar").val() == '') return false;

        ajaxFileUpload();

    }

    $(function(){

        $('#avatar').change(function(){uploadChange()});

}）

第三步，ci框架后端：

  case 'upload_avatar':

                if (is_uploaded_file($_FILES['avatar']['tmp_name'])) {

                    try{

                        $img_arr = imgUpload(

                            array(

                                'path' => FCPATH . 'data/upload/member_avatar',

                                'field' => 'avatar',

                                'pre' => 'avatar_',

                            )

                        );

                        $file_name=$img_arr[0]['file_name'];

                        $file_name = (string) $file_name;

                        if(!is_file(FCPATH.DATA_UPLOAD.'member_avatar/'.$file_name)){

                            throw new Exception("上传失败");

                        }

                        $data=array();

                        $data['avatar_name']=$file_name;

                        $data['avatar_url']=getMemberAvatar($file_name);

                        $this->output(1,'上传成功', $data);

                    }catch(Exception $e){

                        $error_msg=$e->getMessage();

                        $error_msg=str_replace('<p>','',$error_msg);

                        $error_msg=str_replace('</p>','',$error_msg);

                        $this->output(400,$error_msg);

                    }

                }else{

                    $this->output(400,"请选择上传的图片");

                }

                break;

第四步：

错误处理：http://blog.csdn.net/imlinjunjie/article/details/49403199