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框架上传一张图片和批量上传图片代码

上传一张图片 前端代码: 上传文件的时候,就要加上 enctype=”multip

Thinkphp5+uploadify 文件上传实现

初次接触服务器端开发,边学习边试着做一个OTA后台服务器,费了好大劲才实现了文件上传和进度条显示。 遇到几个问题: 1. 大文件上传失败 2.上传取消X 符合显示不出来 3. 不知道如何传递变量值给后...
  • tww85
  • tww85
  • 2016年10月19日 14:30
  • 4032

微擎图片上传组件

注: app 端图片上传,功能有所精简. 仅有上传, 没有浏览已上传图片. 使用前需加载表单资源: load()->func('tpl'); Web 端调用 ...

关于tp5上传

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

tp5添加 上传图片

tp5 添加 上传

TP 上传图片 (可上传多图)

//添加轮播图 public function add(){ import('ORG.Net.UploadFile'); ...
  • A9925
  • A9925
  • 2015年06月03日 13:15
  • 3771

基于tp5文件上传到七牛云的插件

基于tp5框架的七牛云存储实现,可以方便的实现文件上传,文件管理功能。只需两行代码就能完成一次文件上传 安装方式。使用composer安装,在项目根目录下运行...

TP图片上传

在D:\wamp\www\Think_php\App\Lib中新建ORG文件夹,这里创建Util文件夹,路劲是D:\wamp\www\Think_php\App\Lib\ORG\Util,把 D:\...

TP5上传

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tp 多文件上传,文件及时预览
举报原因:
原因补充:

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