tp3.23之單圖片上傳

1，首先下載百度插件webupload
2，創建控制器UploadsController.class.php,創建與控制器相對應的視圖Upload文件夾，文件夾有add.html文件
3，將下載的webupload文件放在根目錄Public文件夾下，在add.html中導入其中兩個文件，全部代碼如下(其中include的頭部和尾部文件都是根據H-ui而建立的公共文件，用過H-ui的都知道不了解的去自行了解 )：

<include file="Public/header"/>
<link href="__PUBLIC_ADMIN__/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<article class="page-container">
<form class="form form-horizontal" id="form">
        <input type="hidden" name="id" value="{$data.id}">
          
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2">
            <span class="c-red">*</span> 圖片：</label>
            <div class="formControls col-xs-9 col-sm-9">
                <input type="hidden" name="img" id="img" value="{$data.img}">
                <?php if(cookie('img')){?>
                <div id="uploadimg" onClick=''>
                    <div id="fileList" class="uploader-list"></div>
                    <div id="imgPicker">選擇圖片</div>
                </div>
                <?php }?>
            </div>
        </div>
        
        <div class="row cl">
            <div class="col-xs-9 col-sm-9 col-xs-offset-2 col-sm-offset-2">
                <button onClick="save()" class="btn btn-secondary radius" type="button"> 提 交</button>
            </div>
        </div>
    </form>
    <!--     <div class="row cl">
            <div class="col-xs-9 col-sm-9 col-xs-offset-2 col-sm-offset-2">
                <button onClick="save()" class="btn btn-secondary radius" type="button"> 提 交</button>
            </div>
        </div> -->
	<!-- </form> -->
</div>

<!-- 公共js文件 -->
<include file="Public/js" />
<!--請在下方寫此頁面業務相關的腳本-->
<script type="text/javascript" src="__PUBLIC_ADMIN__/lib/webuploader/0.1.5/webuploader.min.js"></script> 

<!-- 上傳文件代碼塊start -->
<script>
//首先創建WebUploader實例：

var uploader = WebUploader.create({
    auto: true, // 選完文件後，是否自動上傳
    swf: '__PUBLIC_ADMIN__/lib/webuploader/0.1.5/Uploader.swf', // swf文件路徑
    server: '{:U("fileUpload")}', // 文件接收服務端
    pick: '#imgPicker', // 選擇文件的按鈕。可選
    // 只允許選擇圖片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image',
    }
});

//接着監聽fileQueued事件，即當有文件添加進來的時候，通過uploader.makeThumb來創建圖片預覽圖。

uploader.on( 'fileQueued', function( file ) {
    var $list = $("#fileList"),
        //顯示文件名
        //'<div class="info">' + file.name + '</div>'
        $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' +"點擊可刪除圖片"+ '</div>' +
            '</div>'
            ),
        $img = $li.find('img');


    // $list爲容器jQuery實例
    $list.append( $li );

    // 創建縮略圖
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能預覽</span>');
            return;
        }

        $img.attr( 'src', src );
    }, 200, 200 ); //100x100爲縮略圖尺寸
});

//最後是上傳狀態提示了，當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

// 文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');

    // 避免重複創建
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }

    $percent.css( 'width', percentage * 100 + '%' );
});

// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file, res ) {
    console.log(res.filePath);//這裏可以得到上傳後的文件路徑
    $( '#'+file.id ).addClass('upload-state-done');
    $('#imgPicker').css('display','none');
    $('#uploadimg').attr('onClick','delUpload()');
    $('#img').attr('value',$.cookie('img'));

});

// 文件上傳失敗，顯示上傳出錯。
uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');

    // 避免重複創建
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }

    $error.text('上傳失敗');
});

// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});
function delUpload(){
    layer.confirm('要刪除這張圖片嗎？',function(index){
            layer.msg('刪除圖片中...', {icon: 16,time:2000});
            $.ajax({
                url: '{:U("delFileUpload")}', 
                dataType: 'json',
                success:function(result){
                    if(result!='OK'){
                        layer.alert(result, {icon: 2,title :'錯誤提示'});
                    }
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });
            // $('.img_hidden').css('display','none');
            $('#img').attr('value',' ');
            $('.thumbnail').remove();
            $('#uploadimg').attr('onClick','');
            $('#imgPicker').css('display','block');
            layer.close(index);
        }
    );
}
</script>
<!-- 上傳文件代碼塊end -->
<script>
var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引
//提交 
function save(){
   var id = parseInt($('input[name="id"]').val());//獲取id，以改變操作反饋提示
    var admin_title;
    if (id>0) { admin_title = '編輯'; }
    else{ admin_title = '添加'; }
    layer.msg('正在'+admin_title+'...', {icon: 16});
    $.ajax({
        type:'post',
        url:"{:U('save1')}", 
        data:$("#form").serialize(),
        dataType:'json',
        success:function(result){
            if(result=='OK'){
                parent.layer.msg('單圖片上傳'+admin_title+'成功',{icon:1,time:1000});
                parent.setTimeout("location.reload()",1000);
                parent.layer.close(index);
            }else{
                layer.alert(result, {icon: 2,title :'錯誤提示'});
            }
        }
    });
    return false; 
}
</script>
</body>
</html>

後臺代碼如下：

<?php
namespace Admin\Controller;
/*
*CommonController是防止用戶非法登錄，沒有做則改爲Controller，
*同時namespace Admin\Controller;改爲namespace Admin\Controller;
use Think\Controller;
*/
class UploadsController extends CommonController {

    public function oneImg(){
        $data = M('uploads')->where("file = ''")->select();
        $title = '單圖片上傳';
        $this->assign('title',$title);
        $this->assign('data',$data);
        $this->display();
    }


    /**
     * 添加或者編輯單圖片
     */
    public function add1(){
       $id = I('id','','intval');
       if($id>0){
            $title  = '編輯單圖片上傳';
            $data = M('uploads')->find($id);
            $this->assign('data',$data);
        }
        else{
            $title  = '添加單圖片上傳';
        }
        $this->assign('title',$title);
        $this->display();exit();
    }

    public function save1(){
        $id = (int)I('post.id');
        $m = M('Uploads');
        $data['img'] = I('img','','trim');
        if(!$data['img']){
            $this->ajaxReturn('請上傳圖片');
        }
         //數據入庫
        if($id == 0){
            $data['add_time'] = time();
            $res = $m->add($data);
            if(!$res){
                $this->ajaxReturn('新增失敗');
            }
            $this->ajaxReturn('OK');
        }else{
            $res = $m->where('id='.$id)->save($data);
            if(!$res){
                $this->ajaxReturn('修改失敗');
            }
            $this->ajaxReturn('OK');
        }
    }

    //tp上傳圖片到本地
    public function fileUpload(){
        $upload = new \Think\Upload();// 實例化上傳類
        $upload->maxSize   =     3145728 ;// 設置附件上傳大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設置附件上傳類型
        $upload->rootPath  =      './Uploads/'; // 設置附件上傳根目錄
        $upload->savePath  =      ''; // 設置附件上傳（子）目錄
        // 上傳文件 
        $info   =   $upload->upload();
        if(!$info) {
            // 上傳錯誤提示錯誤信息
            $this->error($upload->getError());
        }else{
            // 上傳成功 獲取上傳文件信息
            foreach($info as $file){
                $imginfo =  "/Uploads/".$file['savepath'].$file['savename'];
                cookie('img',$imginfo);
                // echo $imginfo;
            }
        }
    }

    //刪除服務器裏單個文件方法
    public function delFileUpload(){
        // $filename = ROOT_PATH . 'public' . DS . 'uploads/20180628/1.jpg';
        // $filename =  ROOT_PATH . '/Uploads
        // /2019-06-18/5d081cc528d4f.jpg';
        $path=ROOT_PATH.'/Uploads
        /'.date("Y-m-d");
            if(file_exists($path)){
                    $handle = opendir($path);
                    while (false !==$file = readdir($handle)){
                        if ($file !='.' && $file != '..'){
                            $file_fullpath = $path."/".$file;
                            echo iconv('GBK', 'utf-8', $file_fullpath);
                            echo "<br />";
                            if (!is_dir($file_fullpath)){
                                unlink($file_fullpath);
                            }else{
                                rmdir($file_fullpath);
                            }
                        }   
                    }
            }


        if(file_exists($filename)){
            unlink($filename);
            $this->ajaxReturn('刪除失敗');
        }else{
            $this->ajaxReturn('OK');
            // return '我已經被刪除了哦！';
        }
    }
    

}

以上單圖片上傳完畢，發現webupload還是有不小的缺陷，就是本地上傳圖片，你把該圖片刪除後就不能再上傳改圖片，我想是因爲webupload爲了防止用戶重複提交而設置的功能，而解決此bug的方法有兩個思路，深入研究webupload修改防止重複提交相同圖片的代碼，第二個是七牛雲上傳圖片，然後七牛雲刪除圖片。