js 异步上传图片 限制图片的格式大小

上传图片的大小限制一直很困难，找了很多都没找到。
其实还是后端限制比较好。但是这样一来就需要进行ajax请求。

使用jquery 的 ajaxFileUpload控件

前端界面

<input id="img" type="file" size="45" name="img" class="input">
<input type="hidden" value="45570" id="liveId">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

注意input 这个标签，它的id=img,是下面js代码里要填写的

js代码

 function ajaxFileUpload() {
        var imgFileName = $("#liveId").val();
        $.ajaxFileUpload
        (
                {
                    url: '__URL__/upload', //你处理上传文件的服务端
                    secureuri: false,
                    fileElementId: 'img', //上传input的id
                    dataType: 'json',
                    data: {name: imgFileName},//一同上传的数据
                    success: function (data) {
                        alert(data.file_infor);
                    }
                }
        )
        return false;
    }

后台 php代码

public function    upload ()
    {
        $legalExt         = array('jpg', 'png'); // 设置附件上传类型
        $upload           = new \Think\Upload(); // 实例化上传类
        $upload->maxSize  = 60000000;            // 设置附件上传大小
        $upload->exts     = $legalExt;
        $upload->rootPath = './';                // 设置附件上传根目录
        $upload->savePath = '';                  // 设置附件上传（子）目录
        $upload->autoSub  = false;

        if (empty($_FILES['img']['size'])) {
            //不允许上传空文件
            echo json_encode (array('file_infor' => '不能上传空文件!!!'));
        } elseif ($_FILES['img']['size'] / 1024 / 1024 > 1) {
            //最大上传大小为1MB
            echo json_encode (array('file_infor' => '上传文件不得大于1MB'));
        } elseif (in_array ($_FILES['img']['ext'], $legalExt)) {
            //图片格式不是png或者jpg
            echo json_encode (array('file_infor' => '上传文件必须是jpg或者png格式'));
        } else {
            $info = $upload->upload ();
            //判断图片的宽高比
            list($width, $height, $type, $attr) = getimagesize ('./' . $info['img']['savename']);
            $ratio = $height / $width;
            if ($ratio != 0.6) {
                //如果宽高比不是5:3
                echo json_encode (array('file_infor' => "必须上传5:3的图片!!!\n宽度:{$width} \t 高度:{$height}"));
            } else {
                //一切合法，把图片转移到/alidata/exutech/imgaes目录
                $finalImgName    = "/alidata/exutech/images/{$_POST['imgStreamId']}_c.jpg";
                //移动文件
                rename( "./{$info['img']['savename']}", $finalImgName);
                //对图片进行缩放
                $image = new \Think\Image();
                $image->open($finalImgName);
                $image->thumb(200, 120,\Think\Image::IMAGE_THUMB_SCALE)->save($finalImgName);

                //操作记录
                PublicController::handle(array(
                                             'model'=>'视频列表',
                                             'type' => '修改Live【'  .$_POST['liveId']. '】的截图'));
                echo json_encode (array('file_infor' => '上传成功!'));
            }
        }
    }