Uploadify多上传图片插件

标签：uploadify   多张图片   

官网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);
    }
}

Uploadify多上传图片插件

标签：uploadify   多张图片   

原文地址：http://pilipala.blog.51cto.com/10165737/1831613