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'});