基于Html5的文件上传

最新推荐文章于 2022-08-09 23:42:35 发布
最新推荐文章于 2022-08-09 23:42:35 发布
阅读量533 收藏
点赞数
分类专栏： C# 文章标签： 基于html5的文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoguidangjiajia/article/details/50420318
版权

一个文件上传的小demo,支持Chorm，firefox等主流浏览器，不支持IE。通过ajax代码实现多文件异步上传，带有进度条，不使用三方控件，方便修改而不用纠结于三方控件的配置。效果图：

这里写图片描述

页面代码：

<body>
    <div>
        Welcome to home page.
        <input type="button" value="open" id="openMode" name="openMode" />

    </div>

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "excelForm", enctype = "multipart/form-data" }))
 {

    <div id="main_div" class="block">
        <div class="divBlock">
            <div style="width: 100%; margin: -1px auto; height: 25px; background-color: rgb(21,112,166); color: white; font-size: 15px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; ">

                <div style="width: 100%;margin:-1px -1px -1px -1px; height: 40px; position: absolute; top: 13px; height: 20px; background-color: rgb(21,112,166);">
                    <div style="width: 80%; padding-top: -5px; padding-left: 10px;">
                        上传文件
                    </div>
                </div>

            </div>
                <div style="float:none;"></div>
            <div class="buttonDiv">
                <a href="#" id="selectFile" name="selectFile" class="uploadButton">
                    select file
                    <input type="file" name="uploadFile" id="uploadFile" class="file" value="浏览" />
                </a>
               @* <input type="button" value="click" id="test" name="test"/>*@
                <input id="fileName" name="fileName" type="hidden" />
            </div>


            <div class="divFileList">
                <table class="table">

                    <tbody id="tbodyFile">

                    </tbody>
                </table>

            </div>

        </div>
       </div>
 }
</body>

页面样式：

<style type="text/css">
    .block {
        width:100%;
        height:100%;
        display:none;
        position:absolute;
        top:0px;
        left:0px;
        opacity:0.8;
        background-color:#dedbdb ;
    }

    .divBlock {
        width: 400px;
        height: 400px;
        position: absolute;
        opacity: 0.8;
        top: 50px;
        left: 350px;
        border: dotted 1px;
        background-color: #496F75;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
    }

    .divMain {
        width: 650px;
    }

    td {
        height: 30px;
    }

    h1, h2, h3 {
        font-size: 12px;
        margin: 0;
        padding: 0;
    }

    .table {
        width: 100%;
        margin: auto auto;
    }
        .table tbody {
            width: 100%;
        }

        .table th {
            background-repeat: repeat-x;
            height: 30px;
        }
        .table tr
        {
            width:100%;
            height:60px;
        }

        .table td, .table th {

            text-align: center;
            margin: auto auto;
            height:60px;
        }

        .table tr.alter {
            background-color: #f5fafe;
        } 

    .excelbutton {
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffffff', EndColorStr='#ffeeddaa');
        font: bold 90% 'trebuchet ms', helvetica, sans-serif;
        display: inline-table;
        width: 80px;
        height: 20px;
        position: relative;
        overflow: hidden;
        text-align: center;
        padding-top: 0px;
        font-size: 13px;
        padding-top: 4px;
        text-decoration:none;
    }

        .excelbutton:hover {
            border: 1px solid;
            border-color: #c63 #930 #930 #c63;
            background-color: #050;
        }

    .file {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 100px;
        opacity: 0;
        filter: alpha(opacity=0);
        height: 20px;
        background-color: rgb(21,112,166);
        cursor: pointer;
    }

    .buttonDiv {
        width: 70%;
        margin: 15px 10px;
        height: 10px;
        position:relative;
    }
    .uploadButton {
        display: inline-block;
        position: relative;
        overflow: hidden;
        text-align: center;
        color: #050;
        background-color:#d3d0d0;
        font-size: 11px;
        width: 80px;
        height: 15px;
        padding-top: 1px;
        cursor: pointer;
        text-decoration: none;
        margin-top: 3px;
    }
    .divFileList
    {
        width:98%;
        height:320px;
        border:double 2px #e9dede;
        overflow:auto;
        margin:auto auto;
    }
    .divSignalFile
    {
        width:99%;
        height:60px;
        margin-top:2px;
        margin-left:auto;
        text-align:left;
        border:dotted 1px #dedbdb;
        padding-left:2px;
        padding-top:2px;
    }
    .divSignalFileleft
    {
          width:97%;
          height:60px;
          float:left;
          font-size:12px;
          padding-top:2px;
          padding-left:5px;
    }
    .divSignalFileright
    {
        width:50px;
        height:100px;
        float:left;
        text-align:center;
        padding-top:20px;
        margin-left:10px;
    }    
</style>

JS代码：

<script type="text/javascript">


    $(function () {


        $("#excelForm").submit(function () {

            $(this).ajaxSubmit(optionss);
            //$(this).resetForm();  提交后重置表单
            return false;

        });


        $("#uploadFile").change(function () {
            var mydate = new Date();
            var mintues = mydate.getMinutes(); //获取当前分钟数(0-59)
            var seconds = mydate.getSeconds(); //获取当前秒数(0-59)

            var extention = mintues.toString() + seconds.toString();
            var file = document.getElementById('uploadFile').files[0];

            if (file) {
                var test = "";
                test += "<tr name='" + file.name + extention + "'>";
                test += "         <td style='height:60px;'>";
                test += " <form id='" + file.name + "' method='post' enctype='multipart/form-data'>";
                test += "            <div class='divSignalFile'>     ";
                test += "               <div class='divSignalFileleft'>    ";
                test += "         <div style='width:100%;height:20px;'>    ";
                test += "            <div name='fileTitle'  style='width:100%;padding-top:3px;' >    ";

                test += "                </div>       ";
                test += "        </div>     ";
                test += "       <div style ='width:100%;height:15px;text-align:left;border:solid 1px #8e8c8c;margin-top:2px;'>    ";
                test += "                          <div name='progressBar' data-value='10' style='width:0px;height:14px;margin-top:1px;background-color:#B1D632;'>  ";

                test += "                          </div>      ";
                test += "                      </div>    ";
                test += "                      <div id='progressInfo' style='width:100%;height:20px;padding-top:3px;'>   ";
                test += "                           <div name='current' style='width:60px; float:left;text-align:left;'> ";

                test += "                           </div>      ";
                test += "                          <div name='total' style='width:80px;float:left;text-align:left'></div>    ";
                test += "                          <div name='percent' style='width:40px;float:right;text-align:right'>      ";

                test += "                          </div>         ";
                test += "                          <div style='float:none;'></div>    ";
                test += "                      </div>   ";
                test += "                  </div>   ";

                test += "              <div style='float:none'>     ";

                test += "              </div>      ";
                test += "          </div>    ";
                test += "  </form> ";
                test += "      </td>   ";
                test += "  </tr>   ";

                $("#tbodyFile").append(test);

                sumbit("excelForm", extention);
            }

            //$("#excelForm").submit();
        });

        $("#openMode").bind('click', function () {

            $("#main_div").show();
        });

    });



    function sumbit(form,extention)
    {
        var that = $("#" + form);

        var file = document.getElementById('uploadFile').files[0];
        var optionss = {
            //dataType:"json", 
            //data: $("#excelForm").serializeArray(),
            type: 'post',
            url: "/FileUpload/Upload/upfile",
            beforeSubmit: showRequest,
            success: showResponse,

            beforeSend: function () {
                //$("#current").html("Scan files...");
                //var file = document.getElementById('uploadFile').files[0];
                var fileSize = 0;
                if (file) {
                    if (file.size > 1024 * 1024)
                        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                    else
                        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                    if (file.name.length > 50) {
                        $("#tbodyFile").find("tr[name='" + file.name +extention+ "']").find("div[name='fileTitle']").html(file.name.substring(0, 25) + "...");
                    }
                    else {
                        $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='fileTitle']").html(file.name);
                    }

                }
                else {
                    $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='fileTitle']").html("Please select file");
                    return false;
                }
                // 0KB/100M     50%     80kb/s 
                //total

                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='current']").html("0KB");
                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='total']").html("/" + fileSize);
                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='percent']").html("0%");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var fileSize = 0;
                if (position > 1024 * 1024)
                    fileSize = (Math.round(position * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(position * 100 / 1024) / 100).toString() + 'KB';

                var fileTotalSize = 0;
                if (total > 1024 * 1024)
                    fileTotalSize = (Math.round(total * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileTotalSize = (Math.round(total * 100 / 1024) / 100).toString() + 'KB';
                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='total']").html("/" + fileTotalSize);


                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='progressBar']").css("width", percentComplete.toString() + "%");
                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='current']").html(fileSize);
                $("#tbodyFile").find("tr[name='" + file.name + extention + "']").find("div[name='percent']").html(percentComplete.toString() + "%");

            },

            clearForm: false
        };





        that.ajaxSubmit(optionss);
    }



        function showResponse(data) {

        }

        function showRequest(data) {
        }

</script>

需要引用的js:

jquery-1.10.2.js
jquery-1.10.2.min.js
jquery-ui-1.10.3.js
jquery-form.js

webconfig配置（当前设置最大上传文件4G）：
< system.web>节点

 <system.web>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime maxRequestLength="40960000"
    executionTimeout="600"
                 appRequestQueueLimit="100"
    />
  </system.web>

< system.webServer>节点:

<system.webServer>
    <security>
      <requestFiltering >
        <requestLimits maxAllowedContentLength="4096000000" ></requestLimits>
      </requestFiltering>
    </security>
  </system.webServer>

资源文件：
多文件上传demo

小鬼当家家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
上传文件demo.html
03-27
上传文件demo.html
初识html5 File API实现带有进度提示的文件上传
weixin_34059951的博客
04-12 103
为什么80%的码农都做不了架构师？>>> ...
基于 HTML5 File API 的文件上传
Everlasting丶幻的专栏
11-20 653
Resumable.js 是一个 JavaScript 库，通过 HTML5 文件 API 提供，稳定和可恢复的批量上传功能。在上传大文件的时候通过每个文件分割成小块，每块在上传失败的时候，上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。 　　此外，它允许用户暂停，恢复，甚至恢复上传不失状态，因为只有目前上传块将被中止，而不是整个上传。R
基于html5的文件上传案例
hellopeng1的博客
06-04 4536
html5的formData对象可以向正常的form表单一样通过ajax请求发送，包括上传文件并且可以一次性上传多个文件。并且可以根据监听事件，监视上传进度，终止，结束等等。下面的实例代码使用到了bootstrap，跑的话先搭建好bootstrap环境。并且要支持html5的浏览器。 jsp页面代码
文件上传小Demo
m0_46132514的博客
08-09 242
文件上传 操作步骤： 1.在form表单中： post方式 enctype=“multipart/from-date” 2.文件上传功能组件：jar包 commons-fileupload commons-io 3.构建上传的类 构建工厂 构建对象 处理中英文乱码 获取上传文件集合： 从对象中获取到根路径 遍历上传的集合： 判断是否为文件格式 1.如果是文件直接上传 2.确定上传的路径 判断路径是否存在，不存在就创建 3.确保文件名不重复，应uuid方法 4.确定是否大三目录 5.执行上传 @WebSe
Jquery结合HTML5实现文件上传
01-19
　在HTML5以前我们如果需要实现文件上传服务器等功能的时候，有时候我们不得不依赖于FLASH去实现，而在HTML5到来之后，我们很容易的实现对文件的上传，只需要利用HTML5的一个FormData属性，结合Jquery就很容易实现...
使用HTML5实现多文件上传
01-31
Uploader(dojox.form.Uploader)，它具有一个可定制样式的fileinput按钮，可使用多文件选择模式，且完全基于HTML元素。在不支持HTML5的浏览器中，该控件可以自动切换到使用Flash或者iframe。Fileinput之所以叫...
HTML5文件上传ui样式特效
06-24
HTML5文件上传ui样式特效是一款基于HTML5 SVG实现的文件上传ui样式特效。
基于HTML5 Ajax实现文件上传并显示进度条
01-21
html5上传是同步上传的方式，所以能够实现进度条的显示。 1.上传文件： 首先我们用ajax来取得<input type=”file” id=”file_upload”>的file对象： var file = null; var input = $(#file_upload); //...
基于html5的文件上传
12-29
基于html5的文件上传，带有进度条，采用ajax表单方式提交，方便修改。
http文件上传demo（http模拟POST表单上传文件）
09-23
由于iOS无法通过html表单来上传文件，因此想要上传文件，必须实现http请求，而不能像其他语言那样通过html表单的post就能上传。此demo经过xcode5测试通过。此文件上传demo是按照 rfc1867协议实现的。
上传HTML模板
01-09
上传功能的网站模板，可以作为参考资料！用于移动开发，html5前端设计等
html附件上传模板
02-05
html附件上传模板
比较6的html5文件上传控件
05-03
比较好用的基于html5的文件上传控件，界面美观，代码量少。
h5 web端上传插件demo样例
08-02
h5 web端上传插件demo样例 上传插件
html上传文件
dreamzuora的博客
10-23 2350
hello 请选择上传的多个文件：
H5上传文档文件之WebUploader+自定义上传参数Demo
Link的博客
12-05 3934
本文档介绍使用由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件WebUploader。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
HTML上传文件样式
qq_41499710的博客
11-29 3173
HTML上传文件样式 上传文件样式 浏览。。。 将上传文件标签的透明度改为零，div放到该标签上，设置上传文件标签文本改变时执行text的值等于file的值 ...
fileupload上传模板
02-19
自己整理的fileupload上传插件 可以直接在项目中套用 简单方便 有需要的可以私信我 上传只是为了笔记
基于HTTP的文件上传工具
最新发布
05-05
基于HTTP的文件上传工具可以使用多种编程语言和框架实现，例如Java的Spring框架、Python的Django框架、Node.js的Express框架等。下面以Java的Spring框架为例，介绍如何实现基于HTTP的文件上传工具。 首先，需要在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值