Thinkphp实现文件上传与删除

港控/mmm° 2022-06-10 10:58 302阅读 0赞

添加前：  
![这里写图片描述][SouthEast]  
添加后：  
![这里写图片描述][SouthEast 1]  
删除后：  
![这里写图片描述][SouthEast 2]  
代码：  
1.html

<tr>
                <td style="width: 100px;text-align: right">
                    附件：
                </td>
                <td>
                    <div id="file1_div">选择文件<input type="file" name="files" id="file1" /></div>
                    <input type="hidden" id="filepaths" name="info[filepaths]" />
                    <input type="hidden" onclick="uploadImg()" value="上传"/>
                    <ul id="img_list">
                    </ul>
                </td>
            </tr>

2.js

var xls = "__STATIC__/img/xls.jpg";
        var txt = "__STATIC__/img/txt.jpg";
        var zip = "__STATIC__/img/zip.jpg";
        var filepathsArr = [];
         $(function(){
            $("#filepaths").on("click",function(){
                var formData = new FormData();
                formData.append("myfile", document.getElementById("file1").files[0]);
                $.ajax({
                    url: "<{:U('Upload/uploadFels')}>",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        filepathsArr.push(data);
                        $('#filepaths').val(filepathsArr.join(";"));
                        var imgurl = data;
                        if(data.indexOf("zip")>-1){
                            $("#img_list").append('<li><img class="this_fels" src="'+zip+'" alt=""/><a ><input class="delete_input" name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                        }else if(data.indexOf("xls")>-1){
                            $("#img_list").append('<li><img class="this_fels" src="'+xls+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                        }else if(data.indexOf("txt")>-1){
                            $("#img_list").append('<li><img class="this_fels" src="'+txt+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i></a></li>');
                        }else{
                            $("#img_list").append('<li><img class="this_fels" src="'+data+'" alt=""/><a><input class="delete_input"  name="files" type="button" value="'+data+'" onclick="deleteimg(this)"/><i class="ico-delete"></i> </a></li>');
                        }
                    },
                    error: function () {
                        alert("上传失败！");
                    }
                });
            })
            $("#file1").on("change",function(){
                $("#filepaths").trigger("click");
            })
        })
        //删除方法
        function deleteimg(e){
            var parent = e.parentNode;
            var parentNode = parent.parentNode
            $.get("<{:U('Upload/deleteThisFels')}>",{filepaths:e.value},function(rel){
                parentNode.remove();
            })
        }

3.THINKPHP

public function deleteThisFels(){ 
       $data= ".".$_GET["filepaths"];
       unlink($data);
       dump($data);
    }
    public function uploadFels(){ 
       $config = C('UPLOAD_CONFIG');
       $upload = new \Think\Upload($config);
       $info = $upload->upload();
       if(!$info) {
       // 上传错误提示错误信息
          $this->error($upload->getError());
       }else{
       // 上传成功
          $saveFiles = array();
          foreach($info as $item){
             $saveFilePath = substr($config['rootPath'],1).$item['savename'];
             array_push($saveFiles,$saveFilePath);
          }
          echo implode(";",$saveFiles);
       }
    }

4.css

ul,li{ list-style-type:none; }
    #file1_div{ width: 100px; background: #ff9d02; height: 40px; line-height: 40px; padding-left: 10px; display: block; float: left; position: relative; }
    #file1_div input{ opacity: 0; width: 100%; position: absolute; top:0; left:0; height: 100%; z-index: 1; display: block; }
    #file1_div~input{ float: left; box-sizing: border-box; box-shadow: none; width: 50px; height: 40px; }
    #img_list{ padding: 0px; margin: 0px; width: 100%; float: left; min-height: 100px; background: #eaedf3; }
    #img_list li{ border: 1px solid #ff9d02; box-sizing: border-box; width: 100px; height: 100px; position: relative; float: left; }
    #img_list li a{ position: absolute; top:0; right: 0; line-height: 30px; width: 30px; text-align: center; height: 30px; color: #fff; display: block; }
    #img_list li a input{ width: 100%; position: absolute; background-size: 100% 100%; height: 100%; z-index: 1; opacity: 0; }
    #img_list li .this_fels{ width: 100%; height: 100%; float: left; }
    #img_list li a i{ display: block; width: 100%; height: 100%; background-size: 100% 100% ; }

[SouthEast]: /images/20220610/0b916ac70fe242a2a145b2ca16ae9eb4.png
[SouthEast 1]: /images/20220610/5406d56fb75f43caba294aa388f650cb.png
[SouthEast 2]: /images/20220610/2c20109b4835416aa98191d07ee7c204.png

发表评论取消回复

表情：

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

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

相关阅读

相关 SSH--文件上传、删除

public String execute(){ //获取当前web工程下的/pic目录的在本机的绝对路径，如果没有则自动创建 String t

爱被打了一巴掌/ 2024年02月18日 15:39/ 0 赞/ 67 阅读

相关 minio实现文件上传下载和删除功能

前言之前用到文件上传功能，在这里做个学习记录。使用minio实现，后面会记录使用fastdfs和阿里云的oss实现文件上传以及他们的比较（oss根据流量收费）。mini

清疚/ 2023年10月01日 07:38/ 0 赞/ 9 阅读

相关 Minio上传文件和删除文件

1、pom文件 <dependency> <groupId>io.minio</groupId>

- 日理万妓/ 2023年01月17日 09:25/ 0 赞/ 329 阅读

相关 thinkphp 文件上传

thinkphp 文件上传直接上代码 // files 是前端上传标签的 name 名称 $file = request()->file('files

阳光穿透心脏的1/2处/ 2022年12月21日 03:13/ 0 赞/ 144 阅读

相关 java上传与下载文件_JavaWeb之实现文件上传与下载

1、什么是上传和下载？ \- 数据上传是指客户端向服务器上传数据，客户端向服务器发送的所有请求都属于数据上传。文件上传是数据上传的一种特例，指的是客户端向服务器上传文件。即

曾经终败给现在/ 2022年11月02日 03:58/ 0 赞/ 397 阅读

相关 Node+Express实现文件的上传下载与删除

1. 演示效果实现一个服务端的静态资源管理器，可以对服务端的文件进行上传、下载、删除等操作，并且对中文的文件名做了处理。效果如下： ![在这里插入图片描述][e13

淡淡的烟草味﹌/ 2022年09月10日 04:11/ 0 赞/ 245 阅读

相关 Thinkphp实现文件上传与删除

添加前： ![这里写图片描述][SouthEast] 添加后： ![这里写图片描述][SouthEast 1] 删除后： ![这里写图片描述][SouthE

港控/mmm°/ 2022年06月10日 10:58/ 0 赞/ 303 阅读

相关 thinkphp5文件上传

jq是网上链接的,thinkphp5是控制器里写的，不足之处多多指教不用submit直接按钮上传话不多说直接上代码 1.静态页面 <!DOCTYPE

一时失言乱红尘/ 2022年04月23日 04:30/ 0 赞/ 246 阅读

相关 thinkphp删除多个数据的同时删除多个上传文件

Ajax传值给controller： <script type="text/javascript"> $(function(){

左手的ㄟ右手/ 2022年02月24日 13:08/ 0 赞/ 247 阅读

相关 thinkPHP修改上传文件，同时删除原文件

controller中： //修改检测 public function pinpai_modi_check(){ $file[0

Dear 丶/ 2022年02月24日 12:56/ 0 赞/ 254 阅读