使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

在Web开发中，上传文件并实时生成其缩略图是一个常见的需求。使用Uploadify库可以方便地实现这一功能。Uploadify是一个基于jQuery的插件，它提供了文件上传的功能，并能在上传过程中实时显示进度条。下面是一个使用Uploadify实现上传图片生成缩略图并实时显示进度条的例子。

1. 引入相关库

首先，确保你已经引入了jQuery和Uploadify库。可以通过CDN链接引入它们：

<link rel="stylesheet" href="//uploadify.com/uploadify.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//uploadify.com/uploadify.js"></script>

2. 创建HTML结构

在HTML中，我们需要一个<input>标签用于选择文件，一个<div>标签用于显示上传进度，以及一个<img>标签用于显示生成的缩略图。

<input type="file" id="fileInput" name="fileInput">
<div id="progress"></div>
<img id="thumbnail" src="" alt="Thumbnail">

3. 初始化Uploadify

在JavaScript中，我们需要初始化Uploadify，并设置一些必要的参数。例如，我们可以在onUploadSuccess事件中生成缩略图，并在onUploadProgress事件中更新进度条。

$(document).ready(function() {
$('#fileInput').uploadify({
fileSizeLimit: 5000000, // 文件大小限制（单位：字节）
fileTypeDesc: 'Image Files', // 文件类型描述
fileTypeExts: '*.jpg; *.png; *.gif', // 文件类型扩展名
postMessage: {
onUploadProgress: function(e, data) {
// 更新进度条
var progress = $('#progress');
progress.width(progress.width() + e.loaded / e.total * 100 + '%');
}
},
onUploadSuccess: function(e, data) {
// 文件上传成功后，生成缩略图并显示在页面上
var thumbnail = $('#thumbnail');
thumbnail.attr('src', data.response); // 将生成的缩略图URL设置为img标签的src属性
}
});
});

4. 生成缩略图并上传文件

当用户选择文件后，我们可以使用JavaScript或后端语言（如PHP、Node.js等）生成缩略图，并将文件和缩略图上传到服务器。下面是一个使用JavaScript生成缩略图的例子：
```javascript
$(‘#fileInput’).change(function() {
var file = this.files[0]; // 获取用户选择的文件对象数组的第一个元素（通常是用户选择的第一个文件）
var reader = new FileReader(); // 创建一个FileReader对象，用于读取文件内容并生成缩略图URL
reader.onloadend = function() { // 当读取文件完成后执行此回调函数
var thumbnail = $(‘#thumbnail’); // 获取img标签对象，用于设置生成的缩略图URL为img标签的src属性
thumbnail.attr(‘src’, reader.result); // 将生成的缩略图URL设置为img标签的src属性（reader.result包含生成的缩略图URL）
$(‘#fileInput’).uploadify(‘settings’, ‘postMessage’, { onUploadProgress: null }); // 清除上传进度更新事件（因为我们已经手动更新了进度条）