js thinkphp5 图片上传可预览可删除

本是古典何须时尚 2022-04-18 03:48 152阅读 0赞

HTML部分

<style>
    .upload_btn{margin-left: 100px; border: none; background-color: #0e947a; width: 80px; height: 30px; font-size: 16px; color: #fff5d4;}
    .upload_cc{z-index:1; width: 80px; height: 30px; font-size: 16px;}
        .upload_btnss{width: 100%;float: left; height: 50px; line-height: 50px; text-align: center;}
        .upload_file{position: absolute; z-index: 99; width: 60px; opacity: 0; }
    </style>
    <div style="">
        <div id="imgss" style="width: 100%; float: left;"></div>
        <div  class="upload_btnss">
            <input name='images_path'  value=""  type='hidden'>
            <input name='flie' type='file'  onchange='drugreportupload(this)' class='input-text upload_file' multiple>
            <a class='btn btn-secondary size-S radius upload_cc' data-type='form' lay-filter='uploadsss'>文件选择</a>
            <button id="uploads" value="上传" class="upload_btn">上传</button>
        </div>
    
    </div>

JS部分 jquery多图上传可预览删除

<script>
        var data = new FormData();
    //选择文件预览
        function drugreportupload(obj){
            var files = $(obj).get(0).files[0];
    
            $.each($(obj).get(0).files,function(index,item){
                
                var ext = item.name.slice(item.name.lastIndexOf(".")+1).toLowerCase();
                if (ext=="bmp" || ext=="jpg" || ext=="jpeg" || ext=="png" || ext=="gif") {
                var reader = new FileReader();
                reader.readAsDataURL(item);
                reader.onload = function(){
                    $("#imgss").append("<div class='filesie' data-id='"+index+"' style='margin: 15px; float: left;' title='双击删除'><img src='"+this.result+"' height='100' ></div>");
                }
                }else{
                    $("#imgss").append("<div class='filesie'  data-id='"+index+"' style='margin: 15px; float: left; width: 100px; height: 100px; text-align: center; padding-top: 30px; border:1px solid #e2e2e2;'  title='双击删除'>"+item.name+"</div>");
                }
    
                data.append(index, item);
            });
        }
    
    //上传文件
        $("#uploads").click(function () {
            var cur_data = new FormData();
            data.forEach(function (value,key) {
                cur_data.append('file[]',value);
            })
            if(cur_data.get('file[]')===null){
                alert('请选择要上传的文件');
                return false;
            }
            cur_data.append('folder','demo');
            cur_data.append('size',10240);
            $.ajax({
                type: 'POST',
                url: "{:url('publics/uploadmultiplefile')}",
                data: cur_data,
                cache: false,
                processData: false,
                contentType: false,
                success: function (ret) {
                    console.log(ret);
                    if(ret.code==0){
                        //$(obj).prev().val(ret.data);
                        $("[name=images_path]").val(ret.data)
                        alert(ret.msg);
                    }else{
                        alert(ret.msg);
                    }
                }
            });
        });
    
    //删除文件
        $('#imgss').on("dblclick ",'.filesie',function () {
            var id = $(this).data('id');
            data.delete(id);
            $(this).remove();
        })
    
    </script>

THINKPHP5后台处理

/**
         * 上传多个文件.
         *
         * @return type
         */
        public function uploadmultiplefile()
        {
            $files = $this->request->file('file');
            $folder = input('folder');
            $size = input('size');
            $maxsize = 1048576 * $size;
            // return $size;die;
            $path = ROOT_PATH.'public'.DS.'uploads'.DS.$folder;
            $files_path = '';
            $error = null;
            foreach ($files as $key => $file) {
                $info = $file->validate(['size' => $maxsize, 'ext' => 'jpg,png,gif,jpeg,pdf'])->move($path);
                $files['path'] = str_replace('\\', '/', $info->getSaveName());
                $files['original'] = $info->getInfo('name');
    
                if ($info) {
                    if ($key == 0) {
                        $files_path .= $folder.'/'.$files['path'];
                    } else {
                        $files_path .= ','.$folder.'/'.$files['path'];
                    }
                } else {
                    $error = $file->getError();
                }
            }
            if (empty($error) and !empty($files_path)) {
                return ajax_return_adv('上传成功！', '', false, '', '', $files_path);
            } else {
                return ajax_return_adv_error($error);
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 48 阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 417 阅读

相关 ThinkPHP5+Layui实现图片上传加预览

<label class="layui-form-label">图片</label> <a class="layui-btn" id="image" style

朴灿烈づ我的快乐病毒、/ 2022年06月06日 08:42/ 0 赞/ 204 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 495 阅读

相关 layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）

原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 1. `<!DOCTYPE html>` 2.

亦凉/ 2022年05月11日 00:50/ 0 赞/ 864 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 463 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 627 阅读

相关 js thinkphp5 图片上传可预览可删除

HTML部分 <style> .upload_btn{margin-left: 100px; border: none; background-color:

本是古典何须时尚/ 2022年04月18日 03:48/ 0 赞/ 153 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 809 阅读

相关 php图片上传存储源码，可实现预览

<?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('ima

我会带着你远行/ 2021年11月23日 02:10/ 0 赞/ 161 阅读