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

本是古典何须时尚 2022-04-18 03:48 122阅读 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 条评论，122人围观）

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

相关阅读

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

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

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

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

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

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

相关 js上传图片预览

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

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

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

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

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

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

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

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

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

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

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

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 529 阅读

相关上传图片并预览

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

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

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

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

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

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 721 阅读