素材牛VIP会员

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

 所属分类:PHP实例-上传

 浏览:6840次  评论:14次  更新时间:2021-05-10
牛币素材VIP可免积分下载
四种不同的zyupload PHP上传实例教程源码
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:非常简单实用的PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。

详细介绍

使用教程:

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

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

 带有全部功能的实例对应:demo.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("上传成功,文件地址是:" + response + "");
        },
        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>

相关素材 - 上传

讨论这个素材(14)回答他人问题或分享使用心得会奖励牛币

Am***ze  
2016年12月23日

这个很好用啊

回复
钱***哥  
2018年03月06日

这个很好用啊

回复
12***11  
2018年04月10日

这个很好用啊

回复
85***54  
2018年04月10日

这个很好用啊

回复
al***23  
2018年04月10日

这个很好用啊

回复
bo***94  
2018年04月28日

这个很好用啊

回复
bo***fa  
2018年06月15日

这个很好用啊

回复
17***49  
2018年06月28日

如何在同一网页使用zyupload

回复
17***49  
2018年06月28日

如何在同一网页使用多个zyupload

回复
bo***fa  
2018年08月13日

支持 感谢分享

回复
bo***fa  
2018年08月14日

支持 支持

回复
tv***un  
2022年05月05日

支持 谢谢分享

回复
ha***ok  
2023年07月04日

支持 谢谢分享

回复
qq***15  
2024年08月22日

挺好

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:20 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)