我们来详细讲解一些常用弹出窗口/拖放/异步文件上传等实用代码的完整攻略。
弹出窗口
弹出窗口是实现网页交互的常用方式之一，下面讲解如何利用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技术站
微信扫一扫 
支付宝扫一扫 