如何實現(xiàn)Uploadify多上傳圖片插件

小編給大家分享一下如何實現(xiàn)Uploadify多上傳圖片插件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html:

<div class="row cl">
    <label class="form-label col-3"><span class="c-red">*</span>圖片：</label>
    <div class="formControls col-5">
        <input id="file_upload" name="file_upload" type="file" multiple="true">
        <div class="preview">
            <ul id="previewImgs"></ul>
        </div>
        <div class="col-4"> </div>
    </div>
</div>

需要引入的js、css:

<link type="text/css" rel="stylesheet" href="/public/uploadify/uploadify.css">
<script type="text/javascript" src="/public/uploadify/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/public/uploadify/jquery.uploadify.min.js"></script>

JS代碼處理：

<script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'formData': {
                '<?php echo session_name();?>': '<?php echo session_id();?>'
            },
            'uploader'        : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",
            'swf'             : '__PUBLIC__/admin/uploadify/uploadify.swf',
            'auto'            : true, //是否自動開始上傳
            'debug'           : false,// 是否開啟瀏覽器調(diào)試
            'buttonText'      : '請選擇圖片', // 上傳按鈕文字
            'fileTypeExts'    :'*.jpg;*.gif;*.bmp;*.png;*.jpeg', //允許的圖片類型
            'fileSizeLimit'   : '2MB', // 允許的單張圖片的自大值
            'multi'           : false, //是否允許多張圖片一起上傳
            'uploadLimit'     :6,       //允許上傳數(shù)量
            'successTimeout'  : 10, //等待服務器響應時間
            'removeTimeout'   : 0.2, //成功顯示時間
            'onFallback':function(){
                alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試。");
            },
            'onUploadSuccess' : function(file,data,response){
                //alert(data);
                data = $.parseJSON(data);
                var Image = "<div style='display:inline-block'><img src='" + data.thumbpath + "' class='img' style='margin-top:10px;width:150px;height:150px;position: relative;'/>\
                        <input type='hidden' name='image[]' id='image' value='" + data.imgpath + "' />\
                        <a class='del' onclick=goDel(this,'"+data.thumbpath+"')>刪除</a></div>";
                if($("a[class=del]").length>=5){
                    alert("暫不支持5條以上！");
                }else{
                    $("#previewImgs").append(Image);
                }
            }
        });
    });

    // ajax 刪除預覽列表中的一張圖片
    function goDel(objdom,src){
        $(objdom).parent().remove();
        return false;
    }
</script>

php后臺處理圖片返回JSON數(shù)據(jù)：

public function uploads (){
    $upload = new \Think\Upload();
    $upload->exts      =  array('jpg', 'gif', 'png', 'jpeg');
    $upload->rootPath  =  './Uploads/';
    $upload->savePath  =  '/image/commodity/';
    if (!is_dir($upload->savePath)) {
        mkdir($upload->savePath,0777,TRUE);
    }
    $info = $upload->upload();
    if(!$info) {
        echo json_encode($upload->getError());
    }else{
        // 上傳成功
        $info['Filedata']['savepath'] = str_replace('image', 'Uploads/image', $info['Filedata']['savepath']);
        $path = $info['Filedata']['savepath'] . $info['Filedata']['savename'];
        $image = new \Think\Image();
        $image->open('.'.$path);
        $thumbpath = '.'.$info['Filedata']['savepath'] . $info['Filedata']['savename'];
        //$image->thumb(148, 84)->save($thumbpath);
        $path = ltrim($path,'.');
        $thumbpath = ltrim($thumbpath,'.');
        $data = array(
            'imgpath' =>$path,
            'thumbpath' => $thumbpath
        );
        echo json_encode($data);
    }
}

注意 :  上傳圖片時session丟失, 只需要修改thinkphp/conf/convention.php中，將VAR_SESSION_ID前面的注釋去掉，然后在客戶端這樣配置下：

'uploader'        : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",

以上是“如何實現(xiàn)Uploadify多上傳圖片插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！