一些常用弹出窗口/拖放/异步文件上传等实用代码

我们来详细讲解一些常用弹出窗口/拖放/异步文件上传等实用代码的完整攻略。

弹出窗口

弹出窗口是实现网页交互的常用方式之一，下面讲解如何利用jQuery实现弹出窗口。

准备工作

在引入jQuery库的基础上，我们需要引入一些额外的CSS和js文件，包括：

bootstrap.min.css
bootstrap-dialog.min.css
bootstrap-dialog.min.js

代码实现

我们可以利用bootstrap-dialog库快速实现一个弹出窗口，例如下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>弹出窗口示例</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css">
</head>
<body>
    <button class="btn btn-success" id="btn-open-dialog">打开弹出窗口</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
    <script>
        $(function(){
            $('#btn-open-dialog').on('click', function(){
                BootstrapDialog.show({
                    title: '弹出窗口示例',
                    message: 'Hello World!'
                });
            });
        });
    </script>
</body>
</html>

拖放

拖放是在网页中实现交互操作的重要方式之一，下面讲解如何利用原生JavaScript实现拖放功能。

代码实现

我们可以利用HTML5中的drag事件和drop事件实现拖放功能，例如下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拖放示例</title>
    <style type="text/css">
        .drop-zone{
            width: 400px;
            height: 300px;
            border: 2px dashed #ccc;
        }
        img{
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <div class="drop-zone" id="drop-zone">
        <p>请将图片拖到此处</p>
    </div>
    <script>
        var dropZone = document.getElementById('drop-zone');
        dropZone.addEventListener('dragover', function(e){
            e.preventDefault();
        });

        dropZone.addEventListener('drop', function(e){
            e.preventDefault();
            var files = e.dataTransfer.files;
            if(files.length > 0){
                var file = files[0];
                var reader = new FileReader();
                reader.addEventListener('load', function(e){
                    dropZone.innerHTML = '<img src="'+reader.result+'">';
                });
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

异步文件上传

异步文件上传是在网页中实现文件上传操作的常用方式之一，下面讲解如何利用jQuery和HTML5中的FormData实现异步文件上传功能。

代码实现

我们可以利用FormData和XMLHttpRequest对象实现异步文件上传功能，例如下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步文件上传示例</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="button" id="btn-upload">上传</button>
    </form>
    <div id="result"></div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $('#btn-upload').on('click', function(){
            var file = $('input[type="file"]').get(0).files[0];
            var formData = new FormData();
            formData.append('file', file);
            $.ajax({
                url: '/api/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    $('#result').html('上传成功!');
                },
                error: function(){
                    $('#result').html('上传失败!');
                }
            });
        });
    </script>
</body>
</html>

以上就是弹出窗口/拖放/异步文件上传等实用代码的完整攻略，希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一些常用弹出窗口/拖放/异步文件上传等实用代码 - Python技术站