Uploadify多上传图片插件-阿里云开发者社区

Uploadify多上传图片插件

2017-11-09 1225

简介：

+关注继续查看

官网demo链接：http://www.uploadify.com/demos/
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,// 是否开启浏览器调试

            'buttonText'      : '请选择图片', // 上传按钮文字

            'fileTypeExts'    :'*.jpg;*.gif;*.bmp;*.png;*.jpeg', //允许的图片类型

            'fileSizeLimit'   : '2MB', // 允许的单张图片的自大值

            'multi'           : false, //是否允许多张图片一起上传

            'uploadLimit'     :6,       //允许上传数量

            '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数据：

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(); ?>",

即可.

参考链接: http://m.blog.csdn.net/qq_29845761/article/details/49803427

本文转自噼里啪啦啦 51CTO博客，原文链接：http://blog.51cto.com/pilipala/1831613，如需转载请自行联系原作者