progressbar使用flash swfupload多上传与控制

分类:Flash_Flex_AIR| 发布:camnprbubuol| 查看: | 发表时间:2010/12/29

我用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.

Folder Structure

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" >&nbsp;</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 &raquo;</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" >&nbsp;</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 &raquo;</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

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/153.html