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

点击我跳转到GIT下载uploadfive

关于uploadfive 的插件的使用，请关注！

猜你喜欢