tp 多文件上传,文件及时预览

原创 2016年06月08日 15:44:57

页面代码

<form class="form1"  action="__URL__/upload/"  method="post" enctype="multipart/form-data">

    <div class="weui_uploader_input_wrp1">
        <div id="localImag1"><img id="preview1" src="__PUBLIC__/image/kh/ph1.png"></div>
        <input class="weui_uploader_input" type="file" name="image[]" id="doc1" onchange="javascript:setImagePreview(1);" accept="image/jpg,image/jpeg,image/png,image/gif" multiple  />
    </div>

    <div class="weui_uploader_input_wrp2">
        <div id="localImag2"> <img id="preview2" src="__PUBLIC__/image/kh/ph2.png"></div>
        <input class="weui_uploader_input" type="file" name="image[]" id="doc2"  onchange="javascript:setImagePreview(2);" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />
    </div>


    <div class="login-btn">
        <input class="submit1" type="submit" value="下一步"></button>
    </div>

</form>


<script type="text/javascript">
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        var docObj=document.getElementById("doc"+avalue);

        var imgObjPreview=document.getElementById("preview"+avalue);
        if(docObj.files &&  docObj.files[0])
        {
        //火狐下,直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();

            //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
        else
        {
        //IE下,使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag"+avalue);
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px";
            //图片异常的捕捉,防止用户修改后缀来伪造图片
            try{
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }
            catch(e)
            {
                alert("您上传的图片格式不正确,请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }

</script>



逻辑处理

public function upload() {

    if (!empty($_FILES)) {
        //如果有文件上传 上传附件
        $data= $this->_upload();
        if(isset($data)){
            //如果上传文件的信息不为空,我们就将这些信息保存到数据库中
            $this->db_img($data,1);
        }else{
            $this->error('插入到数据库失败');
        }

    }

}



    protected function _upload() {
        import('@.ORG.UploadFile');
        $reguid=session("reguid");
        //导入上传类
        $upload = new UploadFile();
        //设置上传文件大小
        $upload->maxSize            = 3292200;
        //设置上传文件类型
        $upload->allowExts          = explode(',', 'jpg,gif,png,jpeg');
        //设置附件上传目录
        $upload->savePath           = './Uploads/'.$reguid."/";
        //设置需要生成缩略图,仅对图像文件有效
        $upload->thumb              = true;
        // 设置引用图片类库包路径
        $upload->imageClassPath     = '@.ORG.Image';
        //设置需要生成缩略图的文件后缀
        $upload->thumbPrefix        = 'm_';
        //设置缩略图最大宽度
        $upload->thumbMaxWidth      = '400,100';
        //设置缩略图最大高度
        $upload->thumbMaxHeight     = '400,100';
        //设置上传文件规则
        $upload->saveRule           = 'uniqid';
        //删除原图
        $upload->thumbRemoveOrigin  = false;
        if (!$upload->upload()) {
            //捕获上传异常
            $this->error($upload->getErrorMsg());
        } else {
            //取得成功上传的文件信息
            $uploadList = $upload->getUploadFileInfo();
//            import('@.ORG.Image');
//            //m_缩略图添加水印, Image::water('原文件名','水印图片地址')
//            Image::water($uploadList[0]['savepath'] . 'm_' . $uploadList[0]['savename'], APP_PATH.'Tpl/Public/Images/logo.png');
//            $_POST['image'] = $uploadList[0]['savename'];
            return $uploadList;
        }

    }




public function db_img($data1,$type){
    $mediator=M("mediator");
    $reguid=session("reguid");
    $mediatordb=$mediator->where("uid=".$reguid)->find();
    //保存当前数据对象
    if($type==1) {
        $data['step'] = 2;
        for ($i = 0; $i < count($data1); $i++) {

            $i == 1 ? ($data['sfz_img_fm'] = $data1[$i]['savename']) : ($data['sfz_img_zm'] = $data1[$i]['savename']);
            $mediator->create($data, Model::MODEL_UPDATE);
            $re1 = $mediator->where("id=" . $mediatordb['id'])->save();
            if ($i == 1) {
                if ($re1 !== false) {
                    $this->redirect("mediator/reg3");
                } else {
                    echo "<script>alert('上传图片失败')</script>";
                    $this->redirect("mediator/reg2");
                }
            }
        }
    }elseif($type==2){
        $data['step'] = 4;
        for ($i = 0; $i < count($data1); $i++) {

            $i == 1 ? ($data['bank_img'] = $data1[$i]['savename']) : ($data['signatureimg'] = $data1[$i]['savename']);
            $mediator->create($data, Model::MODEL_UPDATE);
            $re1 = $mediator->where("id=" . $mediatordb['id'])->save();
            if ($i == 1) {
                if ($re1 !== false) {
                    $this->redirect("mediator/reg5");
                } else {
                    echo "<script>alert('上传图片失败')</script>";
                    $this->redirect("mediator/reg4");
                }
            }
        }
    }elseif($type==3){
        $data['step'] = 6;
        $data['sfz_img_sc'] = $data1[0]['savename'];
        $mediator->create($data, Model::MODEL_UPDATE);
        $re1 = $mediator->where("id=" . $mediatordb['id'])->save();
        if ($re1 !== false) {
            $this->redirect("mediator/reg7");
        } else {
            echo "<script>alert('上传图片失败')</script>";
            $this->redirect("mediator/reg6");
        }
    }


}


版权声明:本文为博主原创文章,未经博主允许不得转载。

TP框架之多文件上传

视图层                                         品牌                                      ...
  • xiaochao199404
  • xiaochao199404
  • 2016年06月28日 07:36
  • 985

SWFupload多文件上传代码TP专用

  • 2012年10月24日 15:21
  • 41KB
  • 下载

关于tp5上传

上传出错public function upload(Request $request) { var_dump($_FILES); // 获取表单上传文件 ...
  • okieM
  • okieM
  • 2016年12月27日 22:20
  • 2376

用javascript 上传文件

使用 javascript 来操作文件,是严格被禁止的,因为你不想一打开网页,硬盘灯就狂闪,然后把你硬盘的文件/列表都慢慢的上传上去,那么你就危险了。所以一般情况下,javascript 操作文件,都...
  • jianyi7659
  • jianyi7659
  • 2013年03月23日 08:48
  • 17602

tp5多图上传

  • qq_38983633
  • qq_38983633
  • 2018年01月10日 10:36
  • 95

tp5简单的多图片上传并预览demo

今天没事去研究了一下多图片同时上传,看了很多案例,也下载了一些插件,感觉都很复杂,就自己想了一个思路,做了个简单的demo,代码贴出来,供大家参考一下。由于我也是小菜鸟,所以代码里有什么问题欢迎大家提...
  • Rainbowsmile1
  • Rainbowsmile1
  • 2017年02月12日 10:06
  • 1317

tp5下的插件uploadify的使用

目标:1.部署前端插件uploadify          2.编写image.js          3.编写图片上传API接口实现图片完美异步上传 预先配置: config.php: ...
  • whulovely
  • whulovely
  • 2017年06月12日 11:12
  • 1031

input标签file类型,选择多个文件进行上传

input标签file类型,选择多个文件进行上传
  • wplblog
  • wplblog
  • 2016年07月15日 18:33
  • 3036

TP5上传

说道上传,图片上传是最常见的了。比如商城的商品列表页,都有一堆商品提供大家看来让大家参考。有一些网站的新闻都会有缩略图让大家预览。所以为了方便需求,tp也专门做了一个上传相关的功能。关于模板方面还是要...
  • booljiaoyu
  • booljiaoyu
  • 2017年03月01日 14:54
  • 2546

TP框架上传一张图片和批量上传图片代码

上传一张图片 前端代码: 上传文件的时候,就要加上 enctype=”multip
  • u010742206
  • u010742206
  • 2016年01月21日 18:59
  • 12860
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tp 多文件上传,文件及时预览
举报原因:
原因补充:

(最多只允许输入30个字)