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

最新推荐文章于 2023-01-09 15:33:29 发布

原创最新推荐文章于 2023-01-09 15:33:29 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery多图上传 #多图上传可预览删除 #jquery多图上传可预览删除 #可预览 #thinkphp5图片上传

JS 同时被 3 个专栏收录

14 篇文章

订阅专栏

php

12 篇文章

订阅专栏

html

7 篇文章

订阅专栏

本文介绍了一种使用HTML, CSS和JavaScript实现的前端多图上传功能，包括文件选择、预览、删除操作及与ThinkPHP5后端的交互过程。通过拖放和点击选择图片，实时预览所选图片，并支持双击删除预览中的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
        }
    }