js、jquery、Bootstrap实现拖拽上传文件

陈艾落

于 2023-03-13 14:49:16 发布

阅读量1.1k

点赞数 1

文章标签： javascript bootstrap jquery

本文链接：https://blog.csdn.net/feifei9989/article/details/129493425

版权

首先，我的错误代码

<!-- 此处省略css样式 -->
<div id="excelImport">
	<input id="fileupload" type="file" style="display:none;" />
	<div>点击上传文件</div>
</div>


<script>
	// 此处省略引入的juqery
	$("#excelImport").click(function() {
		$('#fileupload').click();//此处会触发
	});
	
	$('#fileupload').change(function() {
		var uploadFiles = $('#fileupload').prop('files');
		$("#textfield").val(uploadFiles[0].name);
		startUpload(uploadFiles)
	})
</script>

最后并不会触发选择文件；百思不得其解。

然后发现了使用Bootstrap实现拖拽文件上传的Bootstrap实现拖拽文件上传https://blog.csdn.net/linhaiyun_ytdx/article/details/76212182

再结合美化文件上传样式https://blog.csdn.net/iaoyou1/article/details/80952962

先放演示效果：
1、初始样式
在这里插入图片描述
2、上传后的样式

最终较可观的代码如下：（后续还需要再完善


<style>
    
    .js-upload-finished {
        margin-top: 20px;
    }
    
    .list-group {
        margin-top: 10px;
    }
    
    .upload-drop-title {
        margin: 20px 0 10px;
    }
    
    /* layout.css Style */ 
    .upload-drop-zone {
        height: 200px;
        border-width: 2px;
        margin-bottom: 20px;
    }
    /* skin.css Style*/
    .upload-drop-zone {
        color: #ccc;
        border-style: dashed;
        border-color: #ccc;
        line-height: 200px;
        text-align: center
    }
    
    .upload-drop-zone.drop {
        color: #222;
        border-color: #222;
    }
</style>

<body>
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading" style="text-align: center;"><strong>上传文件</strong></div>
            <div class="panel-body">
                <!-- Standar Form -->
                <div class="form-inline">
                    <div class="form-group">
                        <label for="fileupload">请选择文件:</label>
                        <input id="fileupload" type="file" name="fileupload" accept=".xls,.xlsx" multiple="" style="display:none;" />
                        <input type='text' class="form-control" name='textfield' id='textfield' autocomplete="off" readonly="readonly" />
                        <input id="excelImport" type="button" value="浏览" class="btn btn-success" />
                    </div>
                </div>

                <!-- Drop Zone -->
                <div class="upload-drop-title">或者将文件拖拽到这里</div>
                <div class="upload-drop-zone" id="drop-zone">
                    将文件拖拽到这里
                </div>
                
                <!-- Upload Finished -->
                <div class="js-upload-finished"></div>
            </div>
        </div>
    </div>
    <!-- /container -->
    <!-- 此处引入的文件需要根据自己的文件路径进行修改 -->
    <script src="__PUBLIC__/Js/jquery-1.12.4.min.js"></script>
    <script src="__PUBLIC__/Js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#excelImport").click(function() {
                $('#fileupload').click();
            });
            $('#fileupload').change(function() {
                var uploadFiles = $('#fileupload').prop('files');
                $("#textfield").val(uploadFiles[0].name);
                startUpload(uploadFiles)
            })
        });
        
        $(function() {
            // UPLOAD CLASS DEFINITION
            // ======================

            var dropZone = document.getElementById('drop-zone');
            var uploadForm = $('#js-upload-form');
            
            uploadForm.on('submit', function(e) {
                var uploadFiles = $('#fileupload').prop('files');
                e.preventDefault()
                startUpload(uploadFiles)
            })

            dropZone.ondrop = function(e) {
                e.preventDefault();
                this.className = 'upload-drop-zone';
                $("#textfield").val('');//清空手动浏览上传文件的input
                startUpload(e.dataTransfer.files)
            }
            dropZone.ondragover = function() {
                this.className = 'upload-drop-zone drop';
                return false;
            }
            dropZone.ondragleave = function() {
                this.className = 'upload-drop-zone';
                return false;
            }
        })

        function startUpload(files) {
            // 上传的文件
            console.log(files)
            $('.js-upload-finished').html(
                '<h3>已上传文件</h3>' +
                '<div class="list-group">' +
                '<a href="#" class="list-group-item list-group-item-success">' +
                '<span class="badge alert-success pull-right">Success</span>' +
                files[0].name + '</a></div>'
            )
            return
        }

    </script>
</body>