图片上传功能,单图多图上传功能(附图片水印及缩略图)

浏览:1724 发布日期:2018/01/03 分类:技术分享 关键字: 多图上传 水印
第一部分:html代码<form class="layui-form" name="wpf_main_form" method="post" action="__SELF__" enctype="multipart/form-data" >

    <div class="layui-form-item">
        <div id="moreimage">
        <label class="layui-form-label">多图</label>
        <div class="layui-input-inline">
            <input type="file" name="moreimage[]" multiple="multiple" />
        </div>
        <div class="layui-input-inline imagebox">
            <!-- 
            <img src="" style="max-height:50px">
            <img src="" style="max-height:50px">
             -->
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div id="image">
        <label class="layui-form-label">单图</label>
        <div class="layui-input-inline">
            <input type="file" name="image" />
        </div>
        <div class="layui-input-inline">
            <img src="<?php echo imageUrl($info['image']); ?>" style="max-height:50px">
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="submit"  class="layui-btn" value="立即提交" />
            <input type="reset"  class="layui-btn layui-btn-primary" value="重置" />
        </div>
    </div>
</form>

<script>

$("#moreimage input[type='file']").change(function(){
    console.log($(this)[0].files);
    var f = $(this)[0].files;
    var html = "";
    $.each(f,function(k,v){
        src = window.URL.createObjectURL(v);
        html += '<img src="'+src+'" style="max-height:50px">';
    })
    $("#moreimage .imagebox").html(html);
});

</script>
效果图:


第二部分:单图上传$ImageModel = new \Common\Model\ImageModel();
            $result = $ImageModel->upload($_FILES['image'], "Admin",array(array(300,300,2),array(100,100,2)));//单图上传
$result返回数据如下:


第三部分:多图上传及判断处理$moreimage = array();
            foreach ($_FILES['moreimage'] as $k=>$v)
            {
                foreach ($v as $k1=>$v1)
                {
                    $moreimage[$k1][$k] = $v1;
                }
            }
            
            foreach ($moreimage as $k=>$v)
            {
                if($v['error'] !== 0)
                    unset($moreimage[$k]);
            }
            $_FILES['moreimage'] = $moreimage;

            $ImageModel = new \Common\Model\ImageModel();
            $result = $ImageModel->uploadMore($_FILES['moreimage'], "Admin");
$result返回数据如下:
最佳答案
评论( 相关
后面还有条评论,点击查看>>