Uploadify多上传图片插件

时间:2022-03-01 12:17:16

官网demo链接:http://www.uploadify.com/demos/
html:

<div class="dp_jtxx">            <span class="bq_lf bq_sc">形象照</span>
            <span class="input-file sc1">
                <input type="file" id="shop_image" multiple="true" />
            </span>
        </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代码处理:

$(function(){    $('#shop_image').uploadify({        'formData': {            '<?php echo session_name();?>': '<?php echo session_id();?>'        },        'fileTypeDesc': '上传文件', //上传描述        'fileTypeExts': '{$set['        filetype ']}',        'swf': "__HOME__/uploadify/uploadify.swf",        'uploader': "{:U('auth_image')}", //后台处理图片路径        'buttonText': '&#xe642;',        'buttonClass':'Hui-iconfont',        'fileSizeLimit': '20000000KB',        'uploadLimit': 5,  //文件允许上传数量        'width': 120,        'height': 40,        'marginLeft':150,        'multi': true,  //false不允许上传多张图片        'auto': true,        'buttonCursor': 'hand',        'uploadLimit' : 3,  //允许上传文件个数        'queueID'  : 'some_file_queue',        'successTimeout': 10,  //等待服务器响应时间        'removeTimeout': 0.2,  //成功显示时间        'onFallback':function(){            alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");        },        'onUploadSuccess': function(file, data, response) {            //alert(data)            data = $.parseJSON(data);            var Image = "<img src='" + data.thumbpath + "' class='img' style='width:200px;height:150px;'/>\             <input type='hidden' name='auth_image[]' id='' value='" + data.imgpath + "' />\             <a style='position:absolute;top:50px;right:100px;' thumbpath='" + data.thumbpath + "' imgpath='" + data.imgpath + "' href='javascript:;'  class='del'>X</a>";            if($("a[class=del]").length>=3){                alert("暂不支持3条以上!");            }else{                $(".sc1").append(Image);            }        }    });})//删除图片 $(function  () {        $(".del").live('click',function  () {            var path       = $(this).attr('imgpath');            var thumbpath  = $(this).attr('thumbpath');            var del        = $(this);            del.parent().find("img").remove();            del.parent().find("input").remove();            del.remove();        })    })

php后台处理图片返回JSON数据:

public function auth_image(){    $upload = new \Think\Upload();    $upload->exts      =  array('jpg', 'gif', 'png', 'jpeg');    $upload->rootPath  =  './Uploads/';    $upload->savePath  =  '/image/auth/';    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(140, 84)->save($thumbpath);        $path = ltrim($path,'.');        $thumbpath = ltrim($thumbpath,'.');        $data = array(            'imgpath' =>$path,            'thumbpath' => $thumbpath        );        echo json_encode($data);    }}