ajaxFileUpload单图上传

来源：互联网发布：普林科技大数据成都编辑：程序博客网时间：2024/05/01 20:47

普通的单图头像上传预览效果，比较轻巧

视图的显示，用透明度来隐藏原本点击的input=file，展示自己想要的样式

                <div style="margin-top:10px;"><button>选择图片</button> 建议尺寸：640*320，支持jpg/png/gif格式，大小不超过200K                    <div id="repeat_file" style="width:60px;height:25px;overflow:hidden;position:relative;top:-20px;opacity:0;filter: Alpha(Opacity=0);">                       <input type="file" style="" class="absmiddle" name="uploadedfile" id="uploadedfile"><input type=hidden name=Maxsize value=16384000>                    </div>                </div>

js方面，插件有小bug，加了小修改

    $(function(){        var count = -1;        $("#repeat_file").on("change", "#uploadedfile", function (){            count++;  //            $("#upload_status").html("图片上传中....");            ajaxFileUpload();            $("#uploadedfile").replaceWith("<input type='file' id='uploadedfile' class='absmiddle' name='uploadedfile' title=" + count + "' />");//重新生成新的        });        function ajaxFileUpload(){            $.ajaxFileUpload({                url:'<?= Yii::app()->createUrl("user/dealerUser/loadImage");?>', //处理上传文件的程序文件，见下面的php文件代码                secureuri:false,                fileElementId:'uploadedfile',                dataType:'json',                success:function(data){                    if(data.msg)                    {                        alert(data.msg);                    }                    else                    {                        $('#mimg').attr('src','dealer/uploads/'+data.file_url).show();                        $("#uimg").attr('value',data.file_url);//                        $("#upload_status").html(data.file_url);                    }                }            });            return false;        }    })

controller处理业务

    public function actionLoadImage()    {        $res["msg"] = "";//提示信息        if(empty($_FILES) || $_FILES['uploadedfile']['error'] == 1)        {            $res['msg'] = "图片大小不能超过35K，请重新上传";        }        else        {            if(file_exists($_FILES['uploadedfile']['tmp_name']))            {                $imageName = $_FILES['uploadedfile']['name'];                $ext = substr($imageName, strrpos($imageName, '.')+1);//                $saveName = time() . ".".$ext;                if(in_array(strtolower($ext), array('jpg','jpeg')))                {                    if($_FILES["uploadedfile"]["size"] / 1024 <= 35)                    {                        if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],'dealer/uploads/'.$imageName)){                            $res['file_url'] = $imageName;                        }                        else                        {                            $res["msg"] = "文件上传失败，请重试";                        }                    }                    else                    {                        $res['msg'] = "图片大小不能超过35K，请重新上传";                    }                }                else                {                    $res["msg"] = "图片格式不对，请上传jpg/jpeg格式";                }            }            else            {                $res["msg"] = "请选择要上传的文件";            }        }        $res['msg'] = iconv('GB2312', 'UTF-8', $res['msg']);        echo json_encode($res);        exit();    }

0 0