菜单

BootStrap实现公文及传并带有进度长条效益

2018年11月15日 - Bootstrap

1.率先落实好文件上传,如果是几乎主或者几十兆的公文就因此基本的上传方式就是可了,但是一旦是好文件上传的语句最好好是为此分片上传的不二法门。我这边关键是采用以客户端进行分片读取到劳动器段,然后保留,到了服务器段读取完了后用分片数据进行结合。

1.召开了同龙竟做出来了,在上传成功以后,可以将路径上加到数据库,因为直接于憋如何以上传成功后在拿路径上加到数据库,终于来出来了,太开心了,不得不说bootstrap的强有力,之前说ajax不能够上传文件,之后想方,用js写,更改了上传文件按钮的体裁,但是并未悟出bootstrap真的太厉害了,样式还不易,可以预览,图片,限制文件之分寸,格式等等,还有速度长长的。

2.前端代码如下:

后台的代码在事先写了了

图片 1图片 2

眼看只有前台的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>HTML5大文件分片上传示例</title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" />
    <script src="bootstrap-progressbar/bootstrap-progressbar.js"></script>

    <%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
    <script src="JqueryUI/jquery-ui.js"></script>--%>
    <script>
        function uploadFile() {
            $("#upload").attr("disabled", "disabled");
            var file = $("#file")[0].files[0],  //文件对象
                fileNum = $("#file")[0].files[0].length,
                name = file.name,        //文件名
                size = file.size,        //总大小
                succeed = 0;
            var shardSize = 2 * 1024 * 1024,    //以2MB为一个分片
                shardCount = Math.ceil(size / shardSize);  //总片数
            $('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });
            for (var i = 0; i < shardCount; ++i) {
                //计算每一片的起始与结束位置
                var start = i * shardSize,
                    end = Math.min(size, start + shardSize);
                //构造一个表单,FormData是HTML5新增的
                var form = new FormData();
                form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分
                form.append("name", name);
                form.append("total", shardCount);  //总片数
                form.append("index", i + 1);        //当前是第几片
                //Ajax提交
                $.ajax({
                    url: "Upload.ashx",
                    type: "POST",
                    data: form,
                    async: true,        //异步
                    processData: false,  //很重要,告诉jquery不要对form进行处理
                    contentType: false,  //很重要,指定为false才能形成正确的Content-Type
                    success: function () {
                        ++succeed;
                        $("#output").text(succeed + " / " + shardCount);
                        var percent = ((succeed / shardCount).toFixed(2)) * 100;
                        updateProgress(percent);
                        if (succeed == shardCount) {
                            $("#upload").removeAttr("disabled");
                        }
                    }
                });
            }
        }
        function progress(percent, $element) {
            var progressBarWidth = percent * $element.width() / 100;
            $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
        }

        //$(document).ready(function () {
        //    $('.progress .progress-bar').progressbar({ display_text: 'fill' });
        //});
        function updateProgress(percentage) {
            $('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });
        }
    </script>
</head>
<body>

    <input type="file" id="file" />

    <button id="upload" onclick="uploadFile();">上传</button>

    等待
    <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div>
    </div>
</body>

</html>

记:在印证的时段,尽量用控制高来证明,有的时候你的代码写对了,但是有或alert不显得

View Code

console.log("aaaa");
  1. 后台一般处理程序如下:

1.导入相应的js和样式

图片 3图片 4

<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script>
<script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script>
<link href="css/css/fileinput.min.css" rel="external nofollow" rel="stylesheet">
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace Html5UploadTest
{
    /// <summary>
    /// Summary description for Upload
    /// </summary>
    public class Upload : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try
            {
                //从Request中取参数,注意上传的文件在Requst.Files中
                string name = context.Request["name"];
                int total = Convert.ToInt32(context.Request["total"]);
                int index = Convert.ToInt32(context.Request["index"]);
                var data = context.Request.Files["data"];
                //保存一个分片到磁盘上
                string dir = context.Request.MapPath("~/temp");
                string file = Path.Combine(dir, name + "_" + index);
                data.SaveAs(file);
                //如果已经是最后一个分片,组合
                //当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上,但要控制好并发防止文件锁冲突
                if (index == total)
                {
                    file = Path.Combine(dir, name);
                    //byte[] bytes = null;
                    using (FileStream fs = new FileStream(file, FileMode.OpenOrCreate))
                    {
                        for (int i = 1; i <= total; ++i)
                        {
                            string part = Path.Combine(dir, name + "_" + i);
                            //bytes = System.IO.File.ReadAllBytes(part);
                            //fs.Write(bytes, 0, bytes.Length);
                            //bytes = null;
                            System.IO.File.Delete(part);
                            fs.Close();
                        }
                    }
                }
            }
            catch (Exception)
            {
                throw;
            }
            //返回是否成功,此处做了简化处理
            //return Json(new { Error = 0 });
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2.模态框里加入,千万要牢记name的习性和汝后台的代码属性有关,还有class需要是file

View Code

<input type="file" name="my" class="file" id="aaa" data-show-upload="true" data-show-caption="true"><br>
3.具体的文件上传的方法

4.当了继令还得有的颇处理或断电续传的做事要开,待续。。。

在上传成功之后还有一个ajax的法子,真是极神奇了


稍许时候试试才懂,可免得以

//上传文件
 Initfileinput = function (uploadurl){
  $("#aaa").fileinput({
   //uploadUrl: "../fileinfo/save", // server upload action
   uploadUrl:"https://localhost:8080/GD/UploadAction_execute.action",
   required: true,
   showBrowse: true,
   browseOnZoneClick: true,
   dropZoneEnabled: false,
   allowedFileExtensions: ["jpg", "xlsx"],//只能选择xls,和xlsx格式的文件提交
   //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
   layoutTemplates:{ actionUpload:''},
   /*上传成功之后运行*/
   fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
    console.log("Upload success");
    var a = document.getElementById('aaa').value;
    console.log(a);
    $.ajax({
     type:"post",
     async:false,
     url:"https://localhost:8080/GD/UploadAction_add.action",
     data:{
      "filepath.path" : a
     },
     dataType:"json",
     success:function () {
      console.log("添加成功");
     }
    })
   }),
   /*上传出错误处理*/
   fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
    console.log("Upload failed")
   }),
  });
 }
 Initfileinput (); //记得加载,初始化

总结

如上所述是有点编为大家介绍的BootStrap实现公文上传并带有进度修效益,希望对大家具有助,如果大家发出另外疑窦请为自身留言,小编会及时过来大家的。在斯为非常感谢大家对台本的寒网站的支持!

你可能感兴趣之文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图