progressbar使用flash swfupload多上传与控制
我用swfulpad控制多个文件上传。它的工作,现在我需要用progerss bar。 这是我的页面代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Upload File
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<html>
<head >
<link href="Content/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="Scripts/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "upload.aspx",
post_params: {
"ASPSESSID": "1"},
// File Upload Settings file_size_limit: "50 MB", file_types: "*.csv", file_types_description: "CSV files", file_upload_limit: 0, // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. swfupload_preload_handler: preLoad, swfupload_load_failed_handler: loadFailed, file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, upload_progress_handler: uploadProgress, upload_error_handler: uploadError, upload_success_handler: uploadSuccess, upload_complete_handler: uploadComplete,
// Button settings button_image_url: "content/XPButtonNoText_160x22.png", button_placeholder_id: "spanButtonPlaceholder", button_width: 360, button_height: 22, button_text: ’<span>Select CSV Files </span>’, button_text_style: ’.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }’, button_text_top_padding: 1, button_text_left_padding: 5,
// Flash Settings flash_url: "../../swfupload/swfupload.swf", // Relative to this file flash9_url: "../../swfupload/swfupload_FP9.swf", // Relative to this file
custom_settings: { upload_target: "divFileProgressContainer" },
// Debug Settings
debug: false
});
}
</script>
</head>
<body>
<form action="/FileUpload/Upload" method="post" enctype="multipart/form-data">
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>
</form>
</body>
</html>
</asp:Content>
下边是我的upload.aspx页面代码:
_______________________
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Upload File </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<html>
<head >
<link href="Content/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="Scripts/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "upload.aspx",
post_params: {
"ASPSESSID": "1"},
// File Upload Settings file_size_limit: "50 MB", file_types: "*.csv", file_types_description: "CSV files", file_upload_limit: 0, // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. swfupload_preload_handler: preLoad, swfupload_load_failed_handler: loadFailed, file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, upload_progress_handler: uploadProgress, upload_error_handler: uploadError, upload_success_handler: uploadSuccess, upload_complete_handler: uploadComplete,
// Button settings button_image_url: "content/XPButtonNoText_160x22.png", button_placeholder_id: "spanButtonPlaceholder", button_width: 360, button_height: 22, button_text: ’<span>Select CSV Files </span>’, button_text_style: ’.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }’, button_text_top_padding: 1, button_text_left_padding: 5,
// Flash Settings flash_url: "../../swfupload/swfupload.swf", // Relative to this file flash9_url: "../../swfupload/swfupload_FP9.swf", // Relative to this file
custom_settings: { upload_target: "divFileProgressContainer" },
// Debug Settings
debug: false
});
}
</script>
</head>
<body>
<form action="/FileUpload/Upload" method="post" enctype="multipart/form-data">
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="thumbnails"></div>
</div>
</form>
</body>
</html>
</asp:Content>
请参考下面的链接为多文件上传和进度条
http://www.codeproject.com/KB/aspnet/FlashUpload.aspx
http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/
http://www.uploadify.com/documentation/
使用jQuery多个文件上传和进度条
默认浏览器文件输入框不允许多个文件上传选择一下,也不提供任何视觉线索多少选择的文件有上传。我在前面写了关于多个文件上传使用AJAX,但是这并没有提供多种文件选择和一个进度条。 今天我要向你展示如何创建一个多个文件上传表单允许多文件选择用Ctrl班次/钥匙,还可以显示一个进度条的每个选定的文件当他们正在上传。
For this tutorial, you will need the all powerful jQuery library(latest version) and SWFUpload jQuery Plugin.
Folder Structure
Place the jQuery library in js folder, extract the SWFUpload jQuery Plugin somewhere and copy the jquery.swfupload.js in the src folder to the js folder. Also, copy the swfupload folder inside vendor folder of SWFUpload jQuery Plugin to js Folder. Here’s what your folder structure should look like.
Add reference to jQuery library and then jquery.swfupload.js in the head tag of your page.
HTML Structure Since we will be using SWFUpload, we’ll need a container that will act as placeholder for SWFUpload button, and a list to show the queue of files.
<div id="swfupload-control">
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>
<div id="swfupload-control">
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>
CSS Styles
Here are some CSS styles to stylize our File Uploader, modify them as you want. Important ones are .progressbar and .progress that define the progress bar for file upload, you can adjust their height and color.
#swfupload-control p{ margin:10px 5px; font-size:0.9em; } #log{ margin:0; padding:0; width:500px;} #log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;} #log li .progressbar{ border:1px solid #333; height:5px; background:#fff; } #log li .progress{ background:#999; width:0%; height:5px; } #log li p{ margin:0; line-height:18px; } #log li.success{ border:1px solid #339933; background:#ccf9b9; } #log li span.cancel{ position:absolute; top:5px; rightright:5px; width:20px; height:20px; background:url(’js/swfupload/cancel.png’) no-repeat; cursor:pointer; } #swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;
font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px;
background:url(’js/swfupload/cancel.png’) no-repeat; cursor:pointer; }
The JavaScript Code
The JavaScript code is a bit bulkier but it is not that difficult to understand as it looks. $(function(){ $(’#swfupload-control’).swfupload({ upload_url: "upload-file.php", file_post_name: ’uploadfile’, file_size_limit : "1024", file_types : "*.jpg;*.png;*.gif", file_types_description : "Image files", file_upload_limit : 5, flash_url : "js/swfupload/swfupload.swf", button_image_url : ’js/swfupload/wdp_buttons_upload_114x29.png’, button_width : 114, button_height : 29, button_placeholder : $(’#button’)[0], debug: false
}) .bind(’fileQueued’, function(event, file){ var listitem=’<li id="’+file.id+’" >’+ ’File: <em>’+file.name+’</em> (’+Math.round(file.size/1024)+’ KB) <span class="progressvalue" ></span>’+ ’<div class="progressbar" ><div class="progress" ></div></div>’+ ’<p class="status" >Pending</p>’+ ’<span class="cancel" > </span>’+ ’</li>’; $(’#log’).append(listitem); $(’li#’+file.id+’ .cancel’).bind(’click’, function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance(’#swfupload-control’); swfu.cancelUpload(file.id); $(’li#’+file.id).slideUp(’fast’); }); // start the upload since it’s queued
$(this).swfupload(’startUpload’);
})
.bind(’fileQueueError’, function(event, file, errorCode, message){
alert(’Size of the file ’+file.name+’ is greater than limit’);
})
.bind(’fileDialogComplete’, function(event, numFilesSelected, numFilesQueued){
$(’#queuestatus’).text(’Files Selected: ’+numFilesSelected+’ / Queued Files: ’+numFilesQueued);
})
.bind(’uploadStart’, function(event, file){
$(’#log li#’+file.id).find(’p.status’).text(’Uploading...’);
$(’#log li#’+file.id).find(’span.progressvalue’).text(’0%’);
$(’#log li#’+file.id).find(’span.cancel’).hide();
})
.bind(’uploadProgress’, function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$(’#log li#’+file.id).find(’div.progress’).css(’width’, percentage+’%’);
$(’#log li#’+file.id).find(’span.progressvalue’).text(percentage+’%’);
})
.bind(’uploadSuccess’, function(event, file, serverData){
var item=$(’#log li#’+file.id); item.find(’div.progress’).css(’width’, ’100%’);
item.find(’span.progressvalue’).text(’100%’);
var pathtofile=’<a href="uploads/’+file.name+’" target="_blank" >view »</a>’;
item.addClass(’success’).find(’p.status’).html(’Done!!! | ’+pathtofile);
})
.bind(’uploadComplete’, function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload(’startUpload’); }) }); $(function(){
$(’#swfupload-control’).swfupload({
upload_url: "upload-file.php",
file_post_name: ’uploadfile’,
file_size_limit : "1024",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "Image files",
file_upload_limit : 5,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : ’js/swfupload/wdp_buttons_upload_114x29.png’,
button_width : 114,
button_height : 29,
button_placeholder : $(’#button’)[0],
debug: false
})
.bind(’fileQueued’, function(event, file){
var listitem=’<li id="’+file.id+’" >’+
’File: <em>’+file.name+’</em> (’+Math.round(file.size/1024)+’ KB) <span class="progressvalue" ></span>’+
’<div class="progressbar" ><div class="progress" ></div></div>’+
’<p class="status" >Pending</p>’+
’<span class="cancel" > </span>’+
’</li>’;
$(’#log’).append(listitem);
$(’li#’+file.id+’ .cancel’).bind(’click’, function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance(’#swfupload-control’);
swfu.cancelUpload(file.id);
$(’li#’+file.id).slideUp(’fast’);
});
// start the upload since it’s queued
$(this).swfupload(’startUpload’);
})
.bind(’fileQueueError’, function(event, file, errorCode, message){
alert(’Size of the file ’+file.name+’ is greater than limit’);
})
.bind(’fileDialogComplete’, function(event, numFilesSelected, numFilesQueued){
$(’#queuestatus’).text(’Files Selected: ’+numFilesSelected+’ / Queued Files: ’+numFilesQueued);
})
.bind(’uploadStart’, function(event, file){
$(’#log li#’+file.id).find(’p.status’).text(’Uploading...’);
$(’#log li#’+file.id).find(’span.progressvalue’).text(’0%’);
$(’#log li#’+file.id).find(’span.cancel’).hide();
})
.bind(’uploadProgress’, function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$(’#log li#’+file.id).find(’div.progress’).css(’width’, percentage+’%’);
$(’#log li#’+file.id).find(’span.progressvalue’).text(percentage+’%’);
})
.bind(’uploadSuccess’, function(event, file, serverData){
var item=$(’#log li#’+file.id);
item.find(’div.progress’).css(’width’, ’100%’);
item.find(’span.progressvalue’).text(’100%’);
var pathtofile=’<a href="uploads/’+file.name+’" target="_blank" >view »</a>’;
item.addClass(’success’).find(’p.status’).html(’Done!!! | ’+pathtofile);
})
.bind(’uploadComplete’, function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload(’startUpload’);
})
});
Code Explanation
Since we are using SWFUpload jQuery Plugin, firstly we initialize it on the placeholder element using the $(’#placeholder’).swfupload({ settings }) function and pass it a settings object that defines various parameters like server side file that will handle uploads, maximum size of the file, number of maximum uploads, allowed file types, button url, button size etc. For complete detail of settings you can use, refer to SWFUpload docs. At this stage, your file upload script will work but will not show any visual clue to users about the upload. SWFUpload fires certain events that we can use to provide information to user about the file uploads. So, next thing is to bind functions to various events to show required output. That’s what all bind calls are doing. They are pretty much self-explanatory.
Limitations Since this script uses SWFUpload to upload files, which requires flash plugin, so this will not work if flash plugin is not installed in end user’s browser. Make sure to provide an alternative upload form so that users without flash can upload files.
Also, SWFUpload has some known issues when used on linux systems and if user is behind proxies. Make sure to read them before you use it in production environment.
View Working Demo or Download Source Code
相关文章
- 国外网站应用广泛的20个jQuery网站导航菜单脚本(2010-12-28 13:28:44)
- 把文档转换为SWF或PDF文档的电子文档类工具flashpaper(2010-12-15 9:37:58)
- IT年度最受欢迎的10 个JavaScript 库/JS框架(2010-12-14 11:1:38)
- sendAndLoad/LoadVars 在flash as2中的用法(2010-12-12 16:31:45)
- flash新建文档说明(2010-12-10 17:1:3)
- 可将ActionScript字节码转换为HTML 5的Greystripe：Flash广告有望出现在(2010-12-10 14:27:37)
- 转载Flex/AS3/Air参考书籍及小工具(2010-12-10 12:32:44)
- Flash加密和解密及工具说明(2010-12-10 12:30:27)
- Flash AS3.0 场景加载外部影片剪辑.swf(2010-12-9 16:39:39)
- JavaScript应用框架JsHtaFramework(jsapp)支持云计算(2010-12-9 16:38:23)
