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

秒客网

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

一、上传效果图

相关文章