超先森的博客

2016十二月
12

亲测dropzone.js插件,并附自己做的上传附件案例前后台源码(详细注释)以及汉化后的效果图

先谈一下我为什么做这个。因为我认为i这个插件特别符合现代潮流,所有的上传动画效果我都特别喜欢,支持多文件同时上传,最帅的是拖拽上传,上传进度,上传完成,上传失败的提醒都很亮眼,而且亲测可以支持几乎所有的文件类型,用它做上传一定会给你的作品添加不少亮点。使用起来也特别简单。

HTML:

<link type="text/css" rel="stylesheet" href="__PUBLIC__/vendors_no/dropzone/css/dropzone.css"> //汉化后的css
<script src="__PUBLIC__/vendors_no/dropzone/js/dropzone.js"></script> //引用js

<div class="form-group">
      <label class="col-sm-2 control-label"></label>
      <div class="col-lg-8">
               <form id="my-dropzone" action="{:U('setting/accessoryUpload')}" class="dropzone"></form> //创建上传表单,my-dropzone会绑定插件
      </div>
</div>

JS:

$("#my-dropzone").dropzone({
      url: "{:U('setting/accessoryUpload')}", //上传的url地址
      maxFiles: 10, //最大上传数量
      maxFilesize: 60, //最大上传的文件大小,单位MB
      filesizeBase: 1024, //文件大小的标准规格,这里MB以1024kb为单位
      acceptedFiles: ".js,.obj,.dae,.jpg,.png,.xls" //允许上传的文件类型
});

更多关于dropzone.js的属性详见官网

官方文档:http://www.dropzonejs.com/
Github: https://github.com/enyo/dropzone

PHP:

public function accessoryUpload(){
mport('ORG.UploadFile'); //引用php上传类
$upload = new UploadFile();                 
$path = './Public/accessory/'; //定义上传文件保存路径
$upload->savePath = $path;
if($upload->upload()) { //
我这里主要是图片,所以转为2进制存入了数据库,如果还有很多word、excel之类的,可以将文件名存入数据库
$infos = $upload->getUploadFileInfo();
foreach ($infos as $v) {
$accessory['csk']   = fileBin2hex($path.$v['name']);
$accessory['type']  = $v['extension'];
M('Accessory')->add($accessory);
}
}else{
$this->msg = sys_msg("error","附件上传失败");
$this->show($this->fetch('Public:msg'));
exit;
}

}

下面是一些效果图,想要css和js文件的加我微信(CC1107681823)或QQ(1107681823)私聊。





img

Q版攀登者

文章分类
文章存档
阅读排行
评论排行
img