对上传文件的展示、增删重选功能（前后端代码）

最新推荐文章于 2023-07-29 16:00:12 发布

百雨

最新推荐文章于 2023-07-29 16:00:12 发布

阅读量366

点赞数 2

本文链接：https://blog.csdn.net/sinat_38068807/article/details/101604244

版权

代码上传的是Excel，其他文件只需要修改上传类型即可

复制代码就可运行

代码上传的是Excel，其他文件只需要修改上传类型即可

（一）效果预览：

（二）前端代码

（三）后端代码

（一）效果预览：

1、初次加载

2、点击选择文件或重选后

3、追加文件

4、删除文件，鼠标移上去点击就可删除

（二）前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>showImages</title>
<style type="text/css">
    body{
        background-color: #fff;
    }
    .float{
        float:left;
        width : 200px;
        height: 40px;
        overflow: hidden;
        border: 1px solid #CCCCCC;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    img{
        position: relative;
    }
    .result{
        width: 200px;
        height: 40px;
        text-align: center;
        box-sizing: border-box;
    }


    #file_up{
        display: none;
    }


    .delete{
        width: 200px;
        height:40px;
        position: absolute;
        text-align: center;
        line-height: 40px;
        z-index: 10;
        font-size: 15px;
        background-color: rgba(255,255,255,0.8);
        color: #777;
        opacity: 0;
        transition-duration: 0.7s;
        -webkit-transition-duration: 0.7s;
    }

    .delete:hover{
        cursor: pointer;
        opacity: 1;
    }



</style>

</head>
    <body>
            <div class="container">
                <label>请选择一或多个Excel文件：</label>
                <button id="re_select" onclick="reSelect()">选择文件或重选</button>
                <button id="add" onclick="Add()">追加文件</button>
                <input type="file" id="file_up" name="file" multiple="multiple" accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                <button id="submit" onclick="Submit()">提交文件</button>
            </div>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

        window.onload = function(){
            var input = document.getElementById("file_up");
            var result;
            var dataArr = []; // 储存所选文件的结果(文件名和base64数据),若为空则不让提交
            var form_data = new FormData();   //FormData提交数据
            var oInput = document.getElementById("file_up");

            if(typeof(FileReader) === 'undefined'){
                alert("抱歉，你的浏览器不支持 FileReader");
                input.setAttribute('disabled','disabled');
            }else{
                input.addEventListener('change',readFile,false);
            }

            function readFile(){
                {#for(var k=0; k < form_data.keys(); k++) {#}
                {#    form_data.delete(k)#}
                //{#}#}

                var iLen = this.files.length;
                for(var i=0;i<iLen;i++){
                    var reader = new FileReader();
                    form_data.append(this.files[i].name,this.files[i])
                    console.log('00000'+form_data.get(this.files[i].name))
                    reader.readAsDataURL(this.files[i]);  //转成base64
                    reader.fileName = this.files[i].name;

                    reader.onload = function(e){
                        var imgMsg = {
                            name : this.fileName,//获取文件名
                            base64 : this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
                        }
                        dataArr.push(imgMsg);
                        result = '<div class="delete">删除</div>' +
                                 '<div class="result">' +
                                    '<img class="file_in_pic" style = "width:40px;height:40px;display:inline-block;float:left"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569653458355&di=095f861d24350aabae3f3b4de8d9c57b&imgtype=0&src=http%3A%2F%2Fr.sinaimg.cn%2Flarge%2Ftc%2Fmmbiz_qpic_cn%2F4208752a53c5032985b9de765a1aeaed.jpg"/>' +
                                    '<span class="fileName">'+ this.fileName + '</span>' +

                                 '</div>';
                        var div = document.createElement('div');
                        div.innerHTML = result;
                        div['className'] = 'float';
                        document.getElementsByTagName('body')[0].appendChild(div);  　　//插入dom树

                        div.onclick = function(){
                            $(this).remove();  // 在页面中删除该文件元素

                        }
                    }
                }

            }

            function send(){
                var form_data_up = new FormData() //声明新的formdata存储需要上传的文件
                $(".fileName").each(function () {   //添加需要上传的文件
                    //console.log(form_data.get(this.innerHTML))
                    form_data_up.append(this.innerHTML,form_data.get(this.innerHTML))

                })

                form_data_up.append('csrfmiddlewaretoken', '{{ csrf_token }}')

                $.ajax({
                    url : '/multi_upload',
                    type : 'post',
                    data : form_data_up,
                    
                    processData: false,
                    contentType: false,
                    success : function(data){

                  　}
                })
            }


            reSelect = function(){
                oInput.value = "";   // 先将oInput值清空，否则选择文件与上次相同时change事件不会触发
                //清空已选文件
                $('.float').remove();
                oInput.click();
            }


            Add = function(){
                //oInput.value = "";   // 先将oInput值清空，否则选择文件与上次相同时change事件不会触发，本次业务不用清空
                oInput.click();
            }


            Submit = function(){

                if(!dataArr.length){
                    return alert('请先选择文件');
                }
                send();
            }
        }
        

</script>
</html>

（三）后端代码

路由：

views.py

先安装pandas,来处理excel

# 接收多文件
import pandas as pd
def multi_upload(request):

    if request.method == "POST":
        
        data = request.FILES.items()

        for file in data:
            file_content = pd.read_excel(file[1])
            print(file_content)
    return render(request,'project_info.html')

当然可以自己改改样式：

百雨

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
对上传文件的展示、增删重选功能（前后端代码）

代码上传的是Excel，其他文件只需要修改上传类型即可复制代码就可运行目录代码上传的是Excel，其他文件只需要修改上传类型即可（一）效果预览：（二）前端代码（三）后端代码（一）效果预览：1、初次加载2、点击选择文件或重选后3、追加文件4、删除文件，鼠标移上去点击就可删除（二）前端代码<!DOCTYPE html>...
复制链接

扫一扫