简单的异步图片上传

需要引用 jQuery

<script>
/**
* input type=file 选择器
*/
function upload(id){
            var fileList = $('#' + id)[0].files;
            var formData = new FormData();
            formData.append('type', 'cardorder');
            formData.append('file', fileList[i]);
            $.ajax({
//                    url: '/homev1/mine/upload.html',
                url: '/mobile/view/homev1/open_card_upload.php',
                type: 'POST',
                cache: false,
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (rs) {
                var img = $('#' + id).parents('.img_list');
                if (rs.code == 200 || rs.code == 1) {
                    $(img).find('.default').before('<div class="image_box clearfloat"><div class="del_btn"></div><input type="hidden" name="image" value="' + rs.image + '"><img src="' + rs.image + '" /></div>');
                } else {
                    $.msg.error(rs.msg);
                }
                }
            })
        }
</script>

大概意思就是用js创建一个from 表单，获取显示页面的文件 进行数据传递

php后台示例

<?php

/**
 * @author lianyu001 <[e-mail]>
 * @time 2025年2月14日 01:43:44
 */
require_once WY_ROOT . '/Common.php';
include_once dirname(WY_ROOT) . '/ApiV1/start.php';
include_once dirname(WY_ROOT) . '/ApiV1/mysqli_model.php';
include_once dirname(WY_ROOT) . '/ApiV1/ALLClass.php';

use OSS\OssClient;

header('Content-Type:application/json; charset=utf-8');
$arr = array(); //最外层数组，转json后返回
$msg = "文件上传成功";  //错误时返回错误信息
$code = 1;  //成功信息，其他为错误信息代码
$image = '';
$type = _P('type'); //cardorder
$file = _P('file'); //binary
if (!isset($_FILES['file'])) {
    (new ALLClass())->ajaxReturn(['code' => 412, 'msg' => 'Parameter not found.']);
}
//type==cardorder
//获取上传文件信息
$getFile = $_FILES['file']['tmp_name'];
//上传文件后缀
$ext = substr($_FILES['file']['name'], strrpos($_FILES['file']['name'], '.') + 1);

$allowed_types = ['img', 'gif', 'png', 'jpg', 'jpeg'];
if (in_array($ext, $allowed_types)) {

//重命名文件上传名字
//生成订单号
    date_default_timezone_set('PRC');
    $mtimestamp = sprintf("%.3f", microtime(true)); // 带毫秒的时间戳 
    list($msec, $sec) = explode('.', $mtimestamp);
    $datetime = date("YmdHis", $msec) . $sec;
    $order_sn = getRandomString(3) . $datetime;

    $new_fliename = $order_sn;
    $date_path = date('Y-m-d');
    $type = 'survey';
    $oss_path = 'upload/' . $type . '/' . $date_path . '/' . $new_fliename . '.' . $ext;

    $file_path = $getFile;
    $bucketName = Common::getBucketName();
    $ossClient = Common::getOssClient();

    $oss_http = AliConfig::OSS_HTTP;
    if (is_null($ossClient)) {
        $msg = '文件上传失败';
        $code = '400';
    } else {
        try {
            $ret_flag = $ossClient->uploadFile($bucketName, $oss_path, $file_path);
            $image = $oss_http . $oss_path;
            //保存上传数据，用来删除
            $mod = new Mysqli_model('oss_upload');
            $mod->linkmysql(DB_K_WEIXIN_WAP);
            if (!session_id())
                session_start();
            $mod->up(['path' => $oss_path, 'http_host' => $oss_http, 'user_id' => ($_SESSION['wxuser']['uid'] ? $_SESSION['wxuser']['uid'] : 0)]);
            $mod->closemysql();
            //文件大于1M
            if ($_FILES['file']['size'] > 1 * 1024 * 1024) {  //图片大于1M
                $image = $oss_http . $oss_path . '?x-oss-process=image/quality,Q_40';
            }
        } catch (Exception $e) {
            $pub = new ALLClass();
            $pub->data_log('AliOss文件上传失败:' . $e->getMessage() . ",未上传的文件名 " . $file_path, 'survey.log');
            $msg = '文件上传失败';
            $code = '400';
        }
    }
} else {
    $msg = '文件上传失败';
    $code = '400';
}

$arr['msg'] = $msg;
$arr['code'] = $code;
$arr['image'] = $image;
echo json_encode($arr, JSON_UNESCAPED_UNICODE); //返回