easyUi 图片上传

<style>
    #add{
        padding: 8px;
    }
    #add table{
        width:100%;
        border-collapse: collapse;
        border-color: #D4D4D4;
        border:0px;
    }
    #add table tr{
        height: 30px;
        line-height: 30px;
    }
    #add table th{
        text-align: center;
        color: #777;
        width:100px;
    }
    #add table td{
        padding: 4px 10px;
    }
    .isshow{
        position: relative;
        top:-6px;
        outline: none;
    }
    .show{
        position: relative;
        top:1px;
    }
    .textbox{
        height: 20px;
        line-height: 20px;
        padding: 2px;
        outline: none;
    }
    .textbox-addon {
        position: absolute;
        top: 2px;
    }
    #submit{
        margin-left: 30px;
    }
    input[name=display]{
        position: relative;
        top: 4px;
    }
    /* 图片上传样式 */
    .uploadify{
       margin: 20px auto 0 auto;
       clear: both;
    }
    .pic_content{
        float: left;
        list-style: none;
        padding: 0px;
        margin: 16px 23px 16px 23px;
    }
    .pic_content li{
        float: left;
        width:100px;
        height: 100px;
        border:1px solid #eee;
        overflow: hidden;
        margin: -5px 4px 15px 4px;
        position: relative;
    }
    .pic_content li img{
        position: absolute;
        left:0;
        top:0;
        cursor: pointer;
        z-index: 1;
    }
    .remove{
        display: none;
        width:100px;
        height: 25px;
        background: black;
        position: absolute;
        bottom:0;
        left: 0;
        z-index: 2;
        opacity: 0.7;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    }
    .text{
        display: none;
        width:100px;
        height: 25px;
        line-height: 25px;
        color: white;
        position: absolute;
        bottom:0;
        left: 0;
        z-index: 3;
        text-align: center;
        cursor: pointer;
    }
    .pic_title{
        height: 30px;
        line-height: 30px;
        color: #d9534f;
        text-indent: 10px;
        font-size: 13px;
        font-weight: bold;
    }
    /* 图片上传样式结束 */
</style>
<script>
    $(function(){

        /* 图片上传 */  var imgTotal = 0; //共几张图片  var imgCurrent = 8; //还能上传几张图片  $("#upDialog").dialog({
            title:'上传图片',
            width:500,
            modal:true,
            closed: true,
        });

        $("#upload").click(function(){
            $("#upDialog").dialog('open');
        });

        $("#file").uploadify({
            swf:ThinkPHP['UPLOADIFY']+'/uploadify.swf',
            uploader:ThinkPHP['MODULE']+'/Uploads/upload',
            width:120,
            height:35,
            buttonCursor:'pointer',
            buttonText:'上传图片',
            fileTypeDesc:'图片类型',
            fileTypeExts:'*.jpeg; *.jpg; *.png; *.gif;',
            fileSizeLimit:'1MB',
            overrideEvents:['onSelectError','onDialogClose','onSelect'], //覆盖错误提示和上传列表  onSelectError:function (file,errorCode,errorMsg) { //上传超出限制  switch (errorCode){
                  case -110:
                      $.messager.alert('警告','超出图片限制!','warning');
                      break;
              }
            },
            onUploadStart:function () { //再上传之前的动作  if(imgTotal==8){
                    $("#file").uploadify('stop'); //停止上传  $("#file").uploadify('cancel');//删除上传列队  $.messager.alert('警告','一次只能上传8张图片！','warning');
                }
            },
            onUploadSuccess:function (file,data,response) { //图片上传成功后的方法  $(".pic_content").append('<li class="img_content"><span class="text">删除</span><span class="remove"></span><img src="__ROOT__/'+data+'" class="img" /></li>');
               $(".pic_content").append('<li class="none" style="display: none;"><input type="hidden" name="imgurl" value='+data+'></li>');
                /* 图片居中 */  setTimeout(function(){
                    var img = $(".img");
                    var imgLen = img.length;
                    if( $(img[imgLen-1]).width()>100){ //宽度大于100  $(img[imgLen-1]).css('left',-( $(img[imgLen-1]).width()-100 ) /2 );
                    }
                    if( $(img[imgLen-1]).height()>100){ //宽度大于100  $(img[imgLen-1]).css('top',-( $(img[imgLen-1]).height()-100 ) /2 );
                    }
                },50);
                /* 图片居中结束 */   /* 鼠标移入显示删除 */  var aLi = $(".pic_content li.img_content");
                var liLen = aLi.length;
                $(aLi[liLen-1]).hover(function () {
                    $(this).find('.remove').show();
                    $(this).find('.text').show();
                },function () {
                    $(this).find('.remove').hide();
                    $(this).find('.text').hide();
                });
                /* 鼠标移入显示删除结束 */   /* 点击删除图片 */  var aText = $(".pic_content .text");
                var textLen = aText.length;
                $(aText[textLen-1]).click(function () {
                   $(this).parent().next('.none').remove();//先删除兄弟节点，再删除图片节点  $(this).parent().remove();
                    /* 限制图片上传的数目 */  imgTotal--;
                    imgCurrent++;
                    $('.imgTotal').text(imgTotal);
                    $('.imgCurrent').text(imgCurrent);
                    /* 限制图片上传的数目结束 */  });
                /* 点击删除图片结束 */   /* 限制图片上传的数目 */  imgTotal++;
                imgCurrent--;
                $('.imgTotal').text(imgTotal);
                $('.imgCurrent').text(imgCurrent);
                /* 限制图片上传的数目结束 */   $(".brandImg").attr('src',ThinkPHP['ROOT']+'/'+data);

            }
        });
        /* 图片上传结束 */    /* 验证表单信息 */  checkData();
        function checkData() {
            $('#bname').validatebox({
                required: true,
                missingMessage:'请输入商标名称'
            });
            $('#url').validatebox({
                required: true,
                missingMessage:'请输入商标链接'
            });
            $('#sort').validatebox({
                required: true,
                missingMessage:'请输入排序'
            });
            $('#info').validatebox({
                required: true,
                missingMessage:'请输入描述'
            });
        }
        /* 验证表单信息结束 */   /* 提交数据 */  $("#submit").click(function(){
            if(  !$('#bname').validatebox('isValid') ){
                $('#bname').focus();
                return;
            }
            if(  !$('#url').validatebox('isValid') ){
                $('#url').focus();
                return;
            }
            if(  !$('#sort').validatebox('isValid') ){
                $('#sort').focus();
                return;
            }
            if(  !$('#info').validatebox('isValid') ){
                $('#info').focus();
                return;
            }
            //保存图片路径  var img = $('.none input[type=hidden]').val();
            $.ajax({
               url:ThinkPHP['MODULE']+'/Brand/add',
               type:'post',
               data:{
                   bname:$('#bname').val(),
                   image:img,
                   url:$("#url").val(),
                   info:$("#info").val(),
                   isshow:$(".display").val(),
                   sort:$("#sort").val()
               },
               success:function(data){
                   console.log(data);return;
                    if(data>0) {
                        $('#tabs').tabs('close', '添加分类');//关闭当前tabs  $('#category').treegrid('reload');//刷新分类数据表格  $.messager.show({
                            title: '我的消息',
                            msg: '添加成功',
                            timeout: 1000,
                            showType: 'slide'
                        });
                    }
               }
            });
        });
        /* 提交数据结束 */  });
</script>
<form id="add" data-options="iconCls:'icon-building_add'">
    <table border="1">
        <tr>
            <th>商标名称</th>
            <td>
                <input type="text" name="bname" id="bname" class="textbox reset">
            </td>
        </tr>
        <tr>
            <th>上传图片</th>
            <td>
                <a id="upload" href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-application_get'">上传图片</a>
            </td>
        </tr>
        <tr>
            <th>商标图片</th>
            <td>
                <img class="brandImg" src="" />
            </td>
        </tr>
        <tr>
            <th>商标链接</th>
            <td>
                <input type="text" id="url" class="textbox" name="url">

            </td>
        </tr>
        <tr>
            <th>是否显示</th>
            <td>
                <label for="xs" >显示</label><input id="xs" type="radio" checked name="display" value="1" >


                <label for="yc" >隐藏</label><input id="yc" type="radio"  name="display" value="0">
            </td>
        </tr>
        <tr>
            <th>排序</th>
            <td>
                <input type="text" name="sort" id="sort" class="textbox" />
            </td>
        </tr>
        <tr>
            <th>商标描述</th>
            <td>
                <textarea class="textbox" id="info" style="width:385px;height: 140px;"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <a id="submit" data-options="iconCls:'icon-accept'"  href="javascript:void(0);" class="easyui-linkbutton">添加商标</a>
            </td>
        </tr>
    </table>
</form>

<div id="upDialog">
    <div class="pic_title">共 <span class="imgTotal">0</span> 张，还能上传 <span class="imgCurrent">8</span> 张(按住Ctrl可选择多张!)</div>
    <ul class="pic_content">

    </ul>
    <input type="file" id="file">
</div>
 
/* PHP端 */
<?php
namespace Admin\Controller;
use Think\Controller;
/**  * 图片上传控制器  * @package Admin\Controller  */ class UploadsController extends Controller {

    public function upload(){
        $upload = new \Think\Upload();// 实例化上传类  $upload->maxSize   =     1048579 ;// 设置附件上传大小 1M  $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型  $upload->rootPath  =     './'; // 设置附件上传根目录  $upload->savePath  =     'Uploads/'; // 设置附件上传（子）目录  // 上传文件  $info   =   $upload->upload();
        if($info){
           $imgPath = $info['Filedata']['savepath'].$info['Filedata']['savename'];
           $image = new \Think\Image();
           $image->open($imgPath);
           $save = $info['Filedata']['savepath'].'180_'.$info['Filedata']['savename'];
           $image->thumb(180,180,\Think\Image::IMAGE_THUMB_CENTER)->save($save);
           echo $save;
        }
    }

}