关于uploadfive 的插件的使用,请关注!
博主前段时间处理图片时,对这个插件真的是又爱又恨,折腾了好长时间。
下面了来说说怎么实施项目吧
~~~
首先需要下载uploadfive,当然官网要收费,但是哥有GIT ,你奈我何,安装文件在最下方,各位请下载便是。
引入uploafive具体过程,我直接上代码吧 这里我的
<?=STATIC_URL;?>
是接口文件的index.php中写的路径 define('STATIC_URL', '/discuz/public/static/');
以上是我的uplofive配置目录,大家可以自己按照自己的来改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>UploadiFive Test</title> <!--<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>--> <script src="<?=STATIC_URL;?>admin/uploadify/jquery.js" type="text/javascript"></script> <script src="<?=STATIC_URL;?>admin/uploadify/jquery.Huploadify.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<?=STATIC_URL;?>admin/uploadify/Huploadify.css"> <style type="text/css"> body { font: 13px Arial, Helvetica, Sans-serif; } </style> </head> <body> <h1>Uploadify Demo</h1> <form> <div id="some-queue"></div> <div id="upload"></div> <div id="divId"></div> <button id="btn2">upload</button> <button id="btn3">cancel</button> <button id="btn4">disable</button> <button id="btn5">ennable</button> <button id="btn6">destroy</button> </form> <script type="text/javascript"> $(function(){ $('#upload').Huploadify({ auto:false, fileTypeExts:'*.*', multi:true, 'overrideEvents' : ['onProgress'], 'buttonText' : '传吧', 'fileTypeExts' : '*.gif; *.jpg; *.png; *.jpeg; ', 'queueID' : 'queue_content', 'queueSizeLimit' : 2, removeTimeout: 10000, removeCompleted: true, method:'post', formData:{key:123456,key2:'vvvv'}, fileSizeLimit:99999999999, showUploadedPercent:true, showUploadedSize:true, uploader:'<?=STATIC_URL;?>admin/uploadify/upload.php', // 'onUploadComplete' : function(file, data) { var str = $('#divId').html(); var add = "<img src='" + "<?=STATIC_URL;?>admin/uploadify/uploads/" + file.name + "'" + " style='margin-left:15px;margin-top:15px; width:300px;height:180px; ' onclick='open1(this)'/></img>"; str += add; $('#divId').html(str); alert('The file ' + file.name + ' uploaded successfully.'); }, onUploadStart:function(file){ console.log(file.name+'开始上传'); }, onInit:function(obj){ console.log('初始化'); console.log(obj); }, }); $('#btn2').click(function(){ up.upload('*'); }); $('#btn3').click(function(){ up.cancel('*'); }); $('#btn4').click(function(){ //up.disable(); up.Huploadify('disable'); }); $('#btn5').click(function(){ up.ennable(); }); $('#btn6').click(function(){ up.destroy(); }); }); </script> </body> </html>
控制器只要写 个方法显示当前页面就好了
如 我的上面是up.html
就是
public function up() { echo $this->fetch('up'); }
就这么简单。
然后 我把uplofive 的配置文件upload,php里面改成这样
<?php $filename = iconv('UTF-8', 'GBK', $_FILES['file']['name']); $key = $_POST['key']; $key2 = $_POST['key2']; if ($filename) { $fileParts = pathinfo($filename); $fileTypes = array('jpg','jpeg','gif','png'); if (in_array($fileParts['extension'],$fileTypes)) { move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $filename); } else { echo 'Invalid file type.'; } } echo $key; echo $key2; echo $filename; ?>
这是为了检验上传图片类型,当然前台HTML文件可以设,但是那个可以绕,不安全,两头加上检验保险。