zyFile.js体更了一个很美观的上传页面，同时上传图片无需刷新，也进一步提升了用户体验。我在网上找了好多的无刷新上传的插件，感觉这个还挺不错的，就像大家推荐这一款。
ps : zyFile.js 体供的代码存在一个bug,如果你直接下的网上的代码，把175行:
file.name 改为 unescape(encodeURIComponent(file.name ))html页面代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5批量上传文件</title>
<!-- 引用控制层插件样式 -->
<link rel="stylesheet" href="/static/upload/control/css/zyUpload.css" type="text/css">
<script src="/static/upload/control/js/jquery-1.7.2.js"></script>
</head>
<body>
<h1 style="text-align:center;">html5批量上传文件</h1>
<div id="demo" class="demo"></div>
<script type="text/javascript">
//上传的路径
var url = "{:url('index/upload')}";
</script>
<!-- 引用核心层插件 -->
<script src="/static/upload/core/zyFile.js"></script>
<!-- 引用控制层插件 -->
<script src="/static/upload/control/js/zyUpload.js"></script>
<script type="text/javascript">
$(function(){
// 初始化插件
$("#demo").zyUpload({
width : "650px", // 宽度
height : "400px", // 宽度
itemWidth : "120px", // 文件项的宽度
itemHeight : "100px", // 文件项的高度
url : url, // 上传文件的路径
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(files, allFiles){ // 选择文件的回调方法
console.info("当前选择了以下文件：");
console.info(files);
console.info("之前没上传的文件：");
console.info(allFiles);
},
onDelete: function(file, surplusFiles){ // 删除一个文件的回调方法
console.info("当前删除了此文件：");
console.info(file);
console.info("当前剩余的文件：");
console.info(surplusFiles);
},
onSuccess: function(file){ // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file);
},
onFailure: function(file){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file);
},
onComplete: function(responseInfo){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(responseInfo);
}
});
});
</script>
</body>
</html>index.php代码:<?php
// +----------------------------------------------------------------------
// | snake
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2022 http://baiyf.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: NickBai <1902822973@qq.com>
// +----------------------------------------------------------------------
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index()
{
return $this->fetch();
}
//处理上传的主方法
public function upload()
{
$file = request()->file('fileList');
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
echo $info->getExtension();
// 输出 42a79759f284b767dfcb2a0197904287.jpg
echo $info->getFilename();
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}
}效果如下:
qiniu.rar
( 3.85 MB 下载：163 次 )
