基于Jquery插件Uploadify实现实时显示进度条上传图片

下面是基于jQuery插件Uploadify实现实时显示进度条上传图片的完整攻略：

1. 准备工作

先从官网下载并解压Uploadify插件。接着在项目中引入依赖文件，主要包括jquery、uploadify.js和uploadify.css。这里以CDN方式引入jQuery和Uploadify依赖文件：

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入Uploadify依赖文件 -->
<link rel="stylesheet" type="text/css" href="./path/to/uploadify.css">
<script type="text/javascript" src="./path/to/jquery.uploadify.js"></script>

2. 实现上传功能

HTML部分可以使用一个简单的input标签实现文件选择：

<input type="file" name="file_upload" id="file_upload" />

接着在JavaScript部分编写上传逻辑，注意上传路径和其他参数的配置：

$(function(){  
    $("#file_upload").uploadify({  
        swf : './path/to/uploadify.swf', // flash文件地址  
        uploader : '/upload.php', // 上传处理文件的路径  
        width :300, // 上传按钮的宽度  
        height : 120, // 上传按钮的高度  
        buttonImage : '/button.png', // 上传按钮的图片  
        fileTypeDesc : 'Image Files', // 上传文件类型描述  
        fileTypeExts : '*.gif; *.jpg; *.png', // 允许上传的文件类型  
        fileSizeLimit : '10MB', // 上传文件大小的限制  
        multi : false, // 是否允许多文件上传  
        formData : {}, // 上传时需要附加的参数（除文件外）  
        // 文件添加成功触发的事件  
        onUploadSuccess : function(file, data, response) {  
            console.log('上传成功!');  
        },  
        // 文件上传前触发的事件  
        onUploadStart : function() {  
            console.log('上传前...');  
        },
        // 实时显示上传进度条  
        onUploadProgress : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  
          var percent = (bytesUploaded / bytesTotal) * 100;  
          console.log("当前上传进度：" + percent + "%");  
        }  
    });  
});

3. 示例说明

以下是两个示例，分别演示了在文件上传前和上传成功后的相关操作：

示例1：上传前确认

$(function(){  
    $("#file_upload").uploadify({  
        // 省略其他参数...  
        // 文件上传前触发的事件  
        onUploadStart : function(file) {  
            if (!confirm('确认上传文件 ' + file.name + ' 吗？')) {
                $("#file_upload").uploadify("cancel", file.id); // 取消上传
            }
        }
    });  
});

该示例在上传开始之前，会弹出一个确认框，提醒用户是否确认上传文件。如果用户确认上传，那么继续上传操作；如果用户取消了上传，则取消上传操作。

示例2：上传成功后自动跳转

$(function(){  
    $("#file_upload").uploadify({  
        // 省略其他参数...  
        // 文件上传成功触发的事件  
        onUploadSuccess : function(file, data, response) {  
            console.log('上传成功!');
            // 1秒后自动跳转到详情页  
            setTimeout(function() {
                window.location.href = "/detail.html?file_id=" + data;
            }, 1000);
        }
    });  
});

该示例在文件上传成功后，自动跳转到详情页，把上传文件的ID做为参数传递过去。

总结

以上就是基于jQuery插件Uploadify实现实时显示进度条上传图片的完整攻略了。读者朋友可以按照该攻略来实现上传功能，同时根据实际需求来进行调整。希望有所帮助。