头像

zyupload的四种不同 PHP上传实例教程源码

来源: https://www.codezhijia.com/php/7.html 代码之家 2018-02-08 23:48:32 浏览(1553) 收藏

非常简单实用的PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。

zyupload的四种不同 PHP上传实例教程源码
分类:PHP/MySQL > 上传 难易:中级
查看演示 下载资源: 6 下载资源 下载积分: 20

此插件包含三个版本,分别是:基础功能版、拖拽功能版、裁剪功能版


 三个版本实例分别对应:demo.basic.html、demo.drag.html、demo.tailor.html


 带有全部功能的实例对应:index.html -- 此页面是所有版本实例的入口


引入相关JS、CSS
 <script type="text/javascript" src="jquery-1.7.2.js"></script>

<link rel="stylesheet" href="zyupload/skins/zyupload-1.0.0.min.css " type="text/css">

<script type="text/javascript" src="zyupload/zyupload-1.0.0.min.js"></script> 

初始化、参数配置
 $(function(){

   // 初始化插件

    $("#zyupload").zyUpload({

        width          :   "650px",           // 宽度

        height          :   "400px",           // 高度

        itemWidth        :   "140px",           // 文件项的宽度

        itemHeight        :   "115px",           // 文件项的高度

        url            :   "./up.php",           // 上传文件的路径

        fileType         :   ["jpg","png","txt","js"], // 上传文件的类型

        fileSize         :   51200000,          // 上传文件的大小

        multiple         :   true,            // 是否可以多个文件上传

        dragDrop         :   true,            // 是否可以拖动上传文件

        tailor          :   true,            // 是否可以裁剪图片

        del            :   true,              // 是否可以删除文件

        finishDel         :   false,             // 是否在上传文件完成后删除预览

        /* 外部获得的回调接口 */

        onSelect: function(selectFiles, allFiles){// 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件

            console.info("当前选择了以下文件:");

            console.info(selectFiles);

        },

        onDelete: function(file, files){// 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件

            console.info("当前删除了此文件:");

            console.info(file.name);

        },

        onSuccess: function(file, response){      // 文件上传成功的回调方法

            console.info("此文件上传成功:");

            console.info(file.name);

            console.info("此文件上传到服务器地址:");

            console.info(response);

            $("#uploadInf").append("<p>上传成功,文件地址是:" + response + "</p>");

        },

        onFailure: function(file, response){      // 文件上传失败的回调方法

            console.info("此文件上传失败:");

            console.info(file.name);

        },

        onComplete: function(response){         // 上传完成的回调方法

            console.info("文件上传完成");

            console.info(response);

        }

    });

    

}); 

HTML结构
 <div id="zyupload" class="zyupload"></div> 

标签: 上传拖拽裁剪
如果您觉得该资源对您的学习有所帮助,您可以点击打赏请我喝杯咖啡,感谢!

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

评论0
头像

Tips:文明上网,谨慎发言,如有违反封号处理...

1 2