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 | 取消禁用回调 |