关于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;  '  οnclick='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文件可以设,但是那个可以绕,不安全,两头加上检验保险。




点击我跳转到GIT下载uploadfive


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值