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