正文

asp.net上传大文件带进度条swfupload

WebAPI  WebAPI  2022-07-31  117

关键词：

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

一、上传效果图

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

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

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

二、核心代码

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

ajax大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。代码如下：html：<inputid="f"type="file"name="part"onchange="writeFile()">JS：核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去... 查看详情

jquery.uploadify文件上传组件实例讲解

...ASP.NET中上传的控件有很多，比如.NET自带的FileUpload，以及SWFUpload，Uploadify等等，尤其后面两个控件的用户体验比较好，无刷新，带上传进度等等。在最近的短信平台开发中，使用Uploadify进行文件上传。Uploadify官网地址是：http://ww... 查看详情

带进度条的文件上传？

】带进度条的文件上传？【英文标题】：Fileuploaderwithprogressbar?【发布时间】：2011-09-1108:01:12【问题描述】：如何创建带有进度条的HTML/PHP/AJAX文件上传器？我不知道从哪里开始。【问题讨论】：【参考方案1】：我用过Uploadify。易... 查看详情

jqueryajax实现上传文件代码，带进度条

原文：jqueryajax实现上传文件代码，带进度条源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传 ... 查看详情

jqueryajax实现上传文件代码，带进度条

使用swfupload上传超过30m文件，使用flash上传组件

原文:使用swfupload上传超过30M文件，使用FLASH上传组件前一段时间会员的上传组件改用FLASH的swfupload来上传，既能很友好的显示上传进度，又能完全满足大文件的上传。后来服务器升级到windows2008,改为IIS7后，上传文件一旦超过... 查看详情

使用 Java 上传文件（带进度条）

】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情

springmvc带进度条的多文件上传

1、关于文件上传进度条的实现在说SpringMVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。（1）需要两个包：commons-fileupload-1.3.1.jarcommons-io-1.4.jar上面这两个包是Apache推出的... 查看详情

[layui]上传文件带进度条+表单提交功能优化(代码片段)

上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情

webuploader插件单个文件上传（带进度条）

@{ViewBag.Title="主页";}<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="styles 查看详情

如何使用进度条快速上传大文件？

】如何使用进度条快速上传大文件？【英文标题】：Howtouploadlargefileinexpresswithprogressbar?【发布时间】：2012-10-1201:46:31【问题描述】：目前我正在使用socket.io上传带有进度条的视频。这是教程http://net.tutsplus.com/tutorials/javascript-ajax/h... 查看详情

使用 XMLHttpRequest 上传大文件时的进度条

】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情

asp.net用多线程上传大文件(500mb~2g)

我要实现B/S架构下，大文件上传。要有进度条，谁有例子，发来，顺带讲解一下众所周知，如果需要向WEB服务器上传文件，一般选用下列2种方式。1.使用HTTPPUT指令2.模拟页面的form提交第一种需要配置服务器，略过。第二种需要... 查看详情

利用formdata对象+xhr新特性实现文件上传——带进度条(代码片段)

小编今天又get到一个新技能，就是上传图片并显示进度条，话不多说，直接进入正题！冲冲冲！！💪实现效果：当点击上传文件按钮后，如果未选择文件，会跳出请选择要上传的文件提示框... 查看详情

如何在springmvc里加入监听器，来监听文件上传进度条

...B这个东西貌似flash有个控件做的不错而且支持多文件上传swfupload你百度一下很好用的里面进度条什么的东西都有查看详情

html5jquery+formdata异步上传文件，带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href=". 查看详情

在Android中上传带有进度条且没有OutOfMemory错误的大文件

】在Android中上传带有进度条且没有OutOfMemory错误的大文件【英文标题】：UploadlargefilewithprogressbarandwithoutOutOfMemoryErrorinAndroid【发布时间】：2014-05-1711:19:16【问题描述】：上传大型视频文件（最大150MB）时遇到问题1.当我使用此代码... 查看详情

asp.net的一个简单进度条功能(代码片段)

...消失，其实也是比较简单的了。我们需要一个进度条代码文件ProgressBar.htm（注意：是没有head这些标签的） <scriptlanguage="javascript">functionSetPorgressBar(pos)//设置进度条居中varscreenWidth=document.body.of 查看详情