ASP.NET MVC:HTML 5+MVC上传文件显示进度的代码

<head>
    <title>Index</title>
    <style type="text/css">
        #statusBorder
        {
            position:relative;
            height:5px;
            width:100px;
            border:solid 1px gray;
            display:none;
            }
        #statusFill{
            position:absolute;
            top:0;
            left:0;
            width:0px;
            background-color:Blue;
            height:5px;
}
    </style>
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var uniqueId = " @Guid.NewGuid().ToString()";

        $(document).ready(function (event) {
            $('#startProcess').click(function () {
                $.post("Home/StartLongRunningProcess",{ id: uniqueId }, function (data) {
                    if (data = "null") {
                        alert("文件为空!");
                    }
                    else {
                        $('#statusBorder').show();
                        getStatus();
                    }
                }, "multipart/form-data");
                event.preventDefault;
            });
        });

        function getStatus() {
            var url = 'Home/GetCurrentProgress/' + uniqueId;
            $.get(url, function (data) {
                if (data != "100") {
                    $('#status').html(data);
                    $('#statusFill').width(data);
                    window.setTimeout("getStatus()", 100);
                }
                else {
                    $('#status').html("Done");
                    $('#statusBorder').hide();
                    alert("文件保存成功");
                };
            });
        }
    </script>
</head>
<body>
    <div>
     <div id="status">
            </div>
        <h2>@Html.Encode(ViewData["Message"]) </h2>
        <div>
            <input id="File1" type="file" name="file"  />
            <input id="startProcess" type="submit" value="提交"  />
        </div>
        <br  />
        <div id="statusBorder">
            <div id="statusFill">
            </div>
        </div>
    </div>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索文件
, function
, position
, data
, width
, asp net mvc 上传
UniqueID
,以便于您获取更多的相关知识。

时间: 2024-12-06 02:22:19

ASP.NET MVC:HTML 5+MVC上传文件显示进度的代码的相关文章

文件上传-ASP.NET服务器端如何接收swfupload上传文件?

问题描述 ASP.NET服务器端如何接收swfupload上传文件? 如题所示:我用ASP.NET在客户端用swfupload做了一个上传文件的功能,现在我要如何才能在服务器接收到上传过来的文件呢? 解决方案 这个简单,PageLoad里面写Request.Files[0].SaveAs(Server.MapPath(""~某路径"") + """" + Request.Files[0].FileName); 解决方案二: 这

asp.net,VS2012中如何在上传文件时可以一起选择多个不同种类的文件

问题描述 asp.net,VS2012中如何在上传文件时可以一起选择多个不同种类的文件 asp.net,VS2012中如何在上传文件时可以一起选择多个不同种类的文件,求大神解答,新手..,拜托了....

Asp.Net的FileUpload类实现上传文件实例_实用技巧

本文实例讲述了Asp.Net的FileUpload类实现上传文件的方法.分享给大家供大家参考. 具体功能代码如下: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.Web.UI; using System.Web; using System.Web.UI.WebControls; using System.Collections; using System.Dra

基于HTML5 Ajax实现文件上传并显示进度条_AJAX相关

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下 效果图: html5上传是同步上传的方式,所以能够实现进度条的显示.1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inpu

基于ajax实现文件上传并显示进度条_javascript技巧

下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi

基于HTML5 Ajax实现文件上传并显示进度条

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下 效果图: html5上传是同步上传的方式,所以能够实现进度条的显示. 1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inp

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

ASP.NET MVC中使用uploadify上传文件

课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方 法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:uploadify. uploadify的使用必 须下载相应的文件,下载地址:http://www.uploadify.com/download/. 先是视 图: <asp:Content ID="Content3" ContentPlaceHolderID="head" runat=&q

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点: 1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)