Asp.Net上传大文件带进度条swfupload

时间:2021-10-28 04:18:08

Asp.Net基于swfupload上传大文件带进度条百分比显示,漂亮大气上档次,大文件无压力,先看效果

一、上传效果图

1、上传前界面:图片不喜欢可以自己换

Asp.Net上传大文件带进度条swfupload

2、上传中界面:百分比显示

 

Asp.Net上传大文件带进度条swfupload

3、上传后返回文件地址,我测试呢所以乱写的

Asp.Net上传大文件带进度条swfupload

二、核心代码

upload.htm代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>博客园:webapi</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/filegroupprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>
<script type="text/javascript">
var swfu;

window.onload
= function () {
var settings = {
flash_url:
"swfupload/swfupload.swf",
upload_url:
"uploadFile.ashx",
file_size_limit:
"409600",
file_types:
"*.apk;*.ipa",
file_types_description:
"Web Image Files",
file_size_limit:
"307200",
file_upload_limit:
1,
file_queue_limit:
1,
custom_settings: {
progressTarget:
"divprogresscontainer",
progressGroupTarget:
"divprogressGroup",

//progress object
container_css: "progressobj",
icoNormal_css:
"IcoNormal",
icoWaiting_css:
"IcoWaiting",
icoUpload_css:
"IcoUpload",
fname_css:
"fle ftt",
state_div_css:
"statebarSmallDiv",
state_bar_css:
"statebar",
percent_css:
"ftt",
href_delete_css:
"ftt",

//sum object
/*
页面中不应出现以"cnt_"开头声明的元素
*/
s_cnt_progress:
"cnt_progress",
s_cnt_span_text:
"fle",
s_cnt_progress_statebar:
"cnt_progress_statebar",
s_cnt_progress_percent:
"cnt_progress_percent",
s_cnt_progress_uploaded:
"cnt_progress_uploaded",
s_cnt_progress_size:
"cnt_progress_size"
},
debug:
false,

// Button settings
button_image_url: "images/btnupload.png",
button_width:
"301",
button_height:
"171",
button_placeholder_id:
"spanButtonPlaceHolder",
//button_text: '<span class="theFont">上传文件</span>',
//button_text_style: ".theFont {background-image: url('images/btnupload.png');width:301px;height:171px}",
//button_text_left_padding: 12,
//button_text_top_padding: 3,

// The event handler functions are defined in handlers.js
file_queued_handler: fileQueued,
file_queue_error_handler: fileQueueError,
upload_start_handler: uploadStart,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
//uploadError
upload_success_handler: uploadOk, //uploadSuccess
//upload_complete_handler: uploadComplete, //uploadComplete
file_dialog_complete_handler: fileDialogComplete
};
swfu
= new SWFUpload(settings);
};
function uploadOk(file, serverData) {
if (serverData != "0") {
alert(
"上传完成!" + serverData);
}
else {
alert(
"上传失败!");
swfu.setButtonDisabled(
false); //启用上传按钮
}
}
</script>


</head>
<body>
<div id="main_upload">
<form id="frmMain" action="upload.ashx" runat="server" enctype="multipart/form-data">
<span id="spanButtonPlaceHolder"></span>
<div id="divprogresscontainer"></div>
<div id="divprogressGroup"></div>
http://www.cnblogs.com/webapi/p/5811304.html </form>
</div>
</body>
</html>

uploadFile.ashx代码

<%@ WebHandler Language="C#" Class="uploadFile" %>

using System;
using System.Web;
using System.IO;

public class uploadFile : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType
= "text/plain";
string PathName = HttpContext.Current.Server.MapPath("file/");
string NewsName = DateTime.Now.ToString("yyyyMMddHHmmssfff");
string NewsPathName = Path.Combine(PathName, NewsName);
DateTime Dtime
= System.DateTime.Now;

HttpPostedFile file
= HttpContext.Current.Request.Files["Filedata"];

if (file != null && file.ContentLength > 0 && !string.IsNullOrEmpty(file.FileName))
{
file.SaveAs(NewsPathName
+ Path.GetFileName(file.FileName));
}

context.Response.Write(
"ok123");
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}

}

 

源码打包下载地址:http://download.csdn.net/detail/pan524365501/9614045

本文地址:http://www.cnblogs.com/webapi/p/5811304.html