thinkphp5+zyFile.js实现的图片无刷新上传
zyFile.js体更了一个很美观的上传页面，同时上传图片无需刷新，也进一步提升了用户体验。我在网上找了好多的无刷新上传的插件，感觉这个还挺不错的，就像大家推荐这一款。
ps : zyFile.js 体供的代码存在一个bug,如果你直接下的网上的代码，把175行:file.name 改为 unescape(encodeURIComponent(file.name ))html页面代码:nbsp;html>

    
    
    
    
    <script></script>

html5批量上传文件

<script><br /> //上传的路径<br /> var url = "{:url(&#039;index/upload&#039;)}";<br /> </script>

<script></script>

<script></script>
<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>


index.php代码: 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 下载：2 次 )