js 异步上传图片

 

/**

 * js异步上传
 * @param {type} upform     表单
 * @param {type} img        图片文件地址
 * @param {type} showimg    显示地址
 * @param {type} val        保存值的地方
 * @returns {undefined}
 */
function ajaxform(upform, img, showimg, val) {
    //formdata储存异步上传数据
    var formData = new FormData($(upform)[0]);//获取上传
    formData.append('file', $(img)[0].files[0]);//添加上传文件数据
    //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
    $.ajax({
        url: '__URL__/ajaxfile',
        type: 'POST',
        data: formData,
        //这两个设置项必填
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data);
            var srcPath = data;
            //注意这里的路径要根据自己的储存文件的路径设置
            $(showimg).attr('src', srcPath);
            $(val).val(srcPath);
              setTimeout("edit=true;",500);
            //清空上传
            $(img).val("");
        }
    });

}

//调用

var edit=true;

/**
 * 定时，如果有图片路径，则上传图片
 * @param {type} img        图片地址
 * @returns {undefined}     
 */
function ajaxfile(img, upform, showimg, val) {
    var ccc = $(img).val();
    console.log(img);
    console.log("选择图片：" + ccc);
    console.log("是否可以调用：" + edit);
    if (edit && ccc != "" && ccc != undefined && ccc != null) {
        edit = false;
        ajaxform(upform, img, showimg, val);
    }
    setTimeout("ajaxfile('" + img + "','" + upform + "','" + showimg + "','" + val + "');", 500);

}

//依据不同需要可自行更改

//我也不记得是从哪里copy过来的啦

ajaxfile("#photo","#upForm","#showpic","#pic");

 

页面如下

<img src='{$list.pic}' id='showpic' alt='无法显示此图片' style="max-height:200px;" title='列表图' /><br/>
                        <form enctype="multipart/form-data" id="upForm">
                        <input type="file"  id="photo" />
                    </form>
                    <input type ='hidden' value="{$list.pic}" name='pic' id='pic' />

 

 

PHP后台接收如下

//封装在类里面，那个，请自行更改

 

    function ajaxfile() {
        foreach ($_FILES as $key => $val) {
            if (!empty($val) && $val['error'] == 0)
                $fileurl = $this->file_copy($val);
            else
                $fileurl = 0;
            break;
        }
        $fileurl = $fileurl;
        $this->ajaxReturn($fileurl);
    }

    //传入$_FILE['file'] 文件，上传文件
    public function file_copy($file, $bool = true) {
        //判断是否存在日期文件
        $filename = "/Uploads/imgs/" . date("Ymd");
        if (!file_exists("." . $filename)) {
            $this->create_folders("." . $filename);
        }
        //获取后缀
        $ary = explode('.', $file['name']);
        $su = end($ary);
        //文件名
        $filenames = $filename . "/" . time() . rand(1, 10000) . "." . $su;
        move_uploaded_file($file['tmp_name'], "." . $filenames);
        //上传到阿里云 oss
        if (C('OSS_OPEN') && $bool) {
            $ossClient = new \OSS\OssClient(C('OSS_KEY'), C('OSS_SECRET'), C('OSS_ENDPOINT'));
            $filenames = ltrim($filenames, "/"); //去除 第一个 '/'
            $bucket = C('OSS_BUCKET');
            // 开始上传
            $pic = $filenames;
            try {
                $ossClient->uploadFile($bucket, $pic, $filenames);
                $file_url = 'http://' . C('OSS_BUCKET') . '.img' . substr(C('OSS_ENDPOINT'), 3) . '/' . $pic;
                $filenames = $file_url;
                //删除本地文件
            } catch (\OSS\Core\OssException $e) {
                die("Failed to upload file ");
                return false;
            }
        }

$_SESSION['ajaxfile'][] = $filenames;
        return $filenames;
    }

    public function create_folders($dir) {
        return is_dir($dir) or ( $this->create_folders(dirname($dir)) and mkdir(iconv("UTF-8", "GBK", $dir), 0777, true));

    }

 

/**
     * 删除图片
     */
    function delajaxfile($filename) {
        //删除图片
        foreach ($_SESSION['ajaxfile'] as $key => $val) {
            if ($val != $filename) {
                $val2 = "." . $val;
                if (file_exists($val2)) {
                    $filename = trim($val, "/");
                    unlink($filename);
                }
            } else {
                unset($_SESSION['ajaxfile'][$key]);
            }
        }
    }

 

/**
     * Ajax方式返回数据到客户端
     * @access protected
     * @param mixed $data 要返回的数据
     * @param String $type AJAX返回数据格式
     * @return void
     */
    protected function ajaxReturn($data,$type='') {
        if(empty($type)) $type  =   C('DEFAULT_AJAX_RETURN');
        switch (strtoupper($type)){
            case 'JSON' :
                // 返回JSON数据格式到客户端 包含状态信息
                header('Content-Type:application/json; charset=utf-8');
                exit(json_encode($data));
            case 'XML'  :
                // 返回xml格式数据
                header('Content-Type:text/xml; charset=utf-8');
                exit(xml_encode($data));
            case 'JSONP':
                // 返回JSON数据格式到客户端 包含状态信息
                header('Content-Type:application/json; charset=utf-8');
                $handler  =   isset($_GET[C('VAR_JSONP_HANDLER')]) ? $_GET[C('VAR_JSONP_HANDLER')] : C('DEFAULT_JSONP_HANDLER');
                exit($handler.'('.json_encode($data).');');  
            case 'EVAL' :
                // 返回可执行的js脚本
                header('Content-Type:text/html; charset=utf-8');
                exit($data);            
            default     :
                // 用于扩展其他返回格式数据
                Hook::listen('ajax_return',$data);
        }
    }