Upload文件上传

upload模块可实现批量上传,以多种形式上传,支持云直传,包括阿里云、七牛云、又拍云等。

简单使用

div节点或input节点使用ax-upload属性即可创建多文件上传实例。不过模块终究是需要完成文件上传,所以还必须配置url参数,指向接收文件的动态页面地址。

input节点还区分一般文本域和文件域。

  • 输出
  • HTML
  • PHP
  • 文本域

    文件域

    其他节点

  •                 
                    
                
  •                 
                    //测试环境模拟跨域
                    header("Access-Control-Allow-Origin: *");
                    //定义上传目录(模拟)
                    $path = "filesDirectory/";
                    $path = "https://unpkg.com/@codady/resource/image/"; 
                    //定义上传文件类型
                    $extArr = array("jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xsl", "xslx","mp3","mp4");
                    //定义上传文件大小限制(1MB)
                    $maxSize = 1024 ** 3;
                    //获取文件类型后缀
                    function extend($file_name)
                    {
                        $extend = pathinfo($file_name);
                        $extend = strtolower($extend["extension"]);
                        return $extend;
                    }
                    //获得13位时间戳,与文件的lastModified位数保持一致
                    function getTimestamp() {
                        list($t1, $t2) = explode(' ', microtime());
                        return (float)sprintf('%.0f',(floatval($t1)+floatval($t2))*1000);
                    }
                    $timestamp = getTimestamp();
                    //输出结果
                    function echoResult($flag,$msg='上传出错了!',$time,$url='',$name='')
                    {
                        $object = $flag?array('msg' => $msg, 'code' => 200, 'url' => $url, 'name' => $name,'time'=>$time):array('msg' => $msg, 'code' => 400,'time'=>$time);
                        $result = json_encode($object);
                        echo  $result;
                    }
                    if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
                        $file = $_FILES[array_shift(array_keys($_FILES))];
                        $name = $file['name'];
                        $size = $file['size'];
                        $tmp = $file['tmp_name'];
                        //随机文件名
                        $ext = extend($name);
                        $image_name = time() . rand(100, 999) . "." . $ext;
                        //有必要在服务器端再做一次校验,避免绕开前端校验恶意上传攻击
                        if (empty($name)) {
                            echoResult(false,'请选择文件!',$timestamp);
                            exit;
                        }
                        if (!in_array($ext, $extArr)) {
                            echoResult(false,'文件格式不对!',$timestamp);
                            exit;
                        }
                        if ($size > $maxSize) {
                            echoResult(false,'文件大小不能超过1MB',$timestamp);
                            exit;
                        }
                        if(!file_exists($path)){
                            //如果路径错误(模拟)
                            echoResult(true,'模拟路径上传成功!',$timestamp,'https://unpkg.com/@codady/resource/image/upload.jpg',$image_name);
                            exit;
                        }else{
                            //通过以上校验则上传文件返回文件路径{valid:true,message:'上传成功!',code:200,url:'files/xxx.jpg'}
                            if (move_uploaded_file($tmp, $path . $image_name)) {
                                //在实际情况中需要手动拼接路径
                                $url = 'ajax/'.$path . $image_name;
                                echoResult(true,'上传成功!',$timestamp,$url,$image_name);
                                exit;
                            }  
                        }
                    }
                    
                

使用new+id也是可以的。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    new ax.Upload('#demo0001',{url:'https://req.axui.cn/v3/php/upload.php'});
                    
                

基础配置

属性 类型 默认值 说明
name string '' 表单隐藏字段name
value string '' 初始文件值
url string '' 文件上传地址
disabled boolean false 是否禁用
readonly boolean false 是否只读
multiple boolean true 是否多选文件
manual boolean false 是否手动上传
pastable boolean true 是否允许粘贴上传

数据源配置

属性 类型 默认值 说明
content string '' 数据源内容
contType 'text'/'async'/'html'/'auto'/'' 'text' 内容类型
contData object {} 请求参数
ajax object {} 异步请求配置

限制配置

属性 类型 默认值 说明
limit.min number 0 最少文件数
limit.max number 0 最多文件数
limit.size number 0 文件大小限制(MB)
limit.suffix string '' 允许的文件后缀
accept string '' 允许的MIME类型

显示配置

属性 类型 默认值 说明
type 'text'/'bullet'/'cube'/'card'/'table' 'text' 列表类型
feature 'picture'/'gallery'/'' '' 固定格式
size 'sm'/'md'/'lg' 'md' 组件尺寸
table.header boolean true 是否显示表头
classes string '' 追加样式类
status string '' 状态栏内容

按钮配置

属性 类型 默认值 说明
chooseBtn.target string '' 选择按钮选择器
chooseBtn.icon string '_icon-plus' 选择按钮图标
chooseBtn.attrs object {} 选择按钮属性
uploadBtn.enable boolean false 是否启用上传按钮
uploadBtn.target string '' 上传按钮选择器
uploadBtn.icon string '_icon-upload' 上传按钮图标
uploadBtn.attrs object {} 上传按钮属性
clearBtn.enable boolean false 是否启用清除按钮
clearBtn.target string '' 清除按钮选择器
clearBtn.icon string '_icon-trash' 清除按钮图标
clearBtn.attrs object {} 清除按钮属性

云存储配置

属性 类型 默认值 说明
cloud.enable boolean false 是否启用云存储
cloud.field string '' 字段名称
cloud.server string '' 服务器地址
cloud.domain string '' 域名地址
cloud.map.name string '' 名称字段映射
cloud.map.url string '' 地址字段映射
cloud.map.size string '' 大小字段映射
cloud.map.time string '' 时间字段映射

等待函数

属性 类型 默认值 说明
b4Clear function null 清除前等待
b4Remove function null 删除前等待
b4Upload function null 上传前等待
b4UploadAll function null 批量上传前等待

回调函数

属性 类型 默认值 说明
onRendered function null 渲染完成回调
onAdded function null 添加完成回调
onRemoved function null 删除完成回调
onCleared function null 清除完成回调
onPasted function null 粘贴上传回调
onDropped function null 拖拽上传回调
onUploading function null 上传中回调
onUploaded function null 上传完成回调
onReceived function null 服务端接收回调
onReceivedAll function null 批量接收回调
onUploadAll function null 开始批量上传回调
onUploadedAll function null 完成批量上传回调
onFailed function null 上传失败回调
onError function null 上传错误回调
onOutput function null 输出值回调
onUpdatedCont function null 内容更新回调
onRequest function null 请求完成回调
onPassivated function null 全局禁用回调
onActivated function null 取消禁用回调