首先,我的错误代码

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


<script&gt;
	// 此处省略引入的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>

原文地址:https://blog.csdn.net/feifei9989/article/details/129493425

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_40190.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注