您的位置:9159金沙官网 > 金沙澳门9159官网 > 【转】文件各种上传,离不开的表单

【转】文件各种上传,离不开的表单

发布时间:2019-10-19 21:13编辑:金沙澳门9159官网浏览(94)

    【转】文件各类上传,离不开的表单

    作为程序猿的大家,日常会要用到文件的上传和下载成效。到了急需用的时候,各类查资料。有木有..有木有...。为了便于后一次选用,这里来做个小结和备忘。

    利用表单达成公文上传

    最原始、最简便易行、最残暴的文本上传。
    【转】文件各种上传,离不开的表单。前端代码:

    //方式1
    <form action="/Home/SaveFile1" method="post" enctype="multipart/form-data">
         <input type="file" class="file1" name="file1" />
         <button type="submit" class="but1">上传</button>
    </form>
    

    【注意】

    • 【转】文件各种上传,离不开的表单。1、需要post提交
    • 2、enctype="multipart/form-data" (传输文件)
    • 【转】文件各种上传,离不开的表单。3、必要交给的表单成分供给设置 name 属性

    后台代码:

    public ActionResult SaveFile1()
    {
        if (Request.Files.Count > 0)
        {
            Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Request.Files[0].FileName);
            return Content("保存成功");
        }
        return Content("没有读到文件");
    }
    

    表单异步上传(jquery.form插件)

    【转】文件各种上传,离不开的表单。尽管上边包车型客车艺术大致凶暴,不过远远不够协和。页面必然会刷新。难以达成停留在此时此刻页面,并交由文件上传成功的提醒。
    【转】文件各种上传,离不开的表单。乘胜岁月的蹉跎,手艺热气腾腾。ajax的产出,使得异步文件提交变得越来越便于。
    上边大家应用jquery.form插件来落实文件的异步上传。
    第热气腾腾我们要求导入jquery.jsjquery.form.js
    前端代码:

    <form id="form2" action="/Home/SaveFile2" method="post" enctype="multipart/form-data">
        <input type="file" class="file1" name="file1" />
        <button type="submit" class="but1">上传1</button>
        <button type="button" class="but2">上传2</button>
    </form>
    
    //方式2(通过ajaxForm绑定ajax操作)
    $(function () {
        $('#form2').ajaxForm({
            success: function (responseText) {
                alert(responseText);
            }
        });
    });
    
    //方式3(通过ajaxSubmit直接执行ajax操作)
    $(function () {
        $(".but2").click(function () {
            $('#form2').ajaxSubmit({
                success: function (responseText) {
                    alert(responseText);
                }
            });
        });
    });
    

    后台代码:

    public string SaveFile2()
    {
        if (Request.Files.Count > 0)
        {                
            Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
            return "保存成功";
        }
        return "没有读到文件";
    }
    

    原理:
    大家广大时候使用了插件,就随意其余三七二十生气勃勃呢。
    假定有一点点好奇心,想想那么些插件是怎么落到实处的。随便看了看源码一千五百多行。笔者的妈啊,不正是个异步上传吗,怎么那样复杂。
    不便见到个什么样鬼来,直接断点调节和测量检验下吧。
    图片 1
    原先插件内部有iframe和FormData分化措施来上传,来适应越多版本浏览器。

    萧规曹随表单数据上传(FormData)

    iframe那东西太恶心。大家看出地点能够采用FormData来上传文件,那几个是Html 5 才有的。上面大家同甘苦也来试试看把。
    前面一个代码:

    <input id="fileinfo" type="file" class="notFormFile" />
    <button type="button" class="btnNotForm">上传4</button>
    
    //方式4
    $(".btnNotForm").click(function () {
        var formData = new FormData();//初始化一个FormData对象
        formData.append("files", $(".notFormFile")[0].files[0]);//将文件塞入FormData
        $.ajax({
            url: "/Home/SaveFile2",
            type: "POST",
            data: formData,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (responseText) {
                alert(responseText);
            }
        });
    });
    

    后的代码:(不改变,照旧上例代码)

    public string SaveFile2()
    {
        if (Request.Files.Count > 0)
        {                
            Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
            return "保存成功";
        }
        return "没有读到文件";
    }
    

    我们来看,FormData对象也只是在模仿三个原来的表单格式的数额。那有未有希望不选择表单或表单格式来上传文件呢?答案是确实无疑的。(下边即刻发布)
    前端代码:

    <input type="file"  id="file5" multiple>
    <button type="button" class="btnFile5">上传5</button>    
    
    //方式5
    $(".btnFile5").click(function () {
        $.ajax({
            url: "/Home/SaveFile4",
            type: "POST",
            data: $("#file5")[0].files[0],
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (responseText) {
                alert(responseText);
            }
        });;       
    });       
    

    后台代码:

    public string SaveFile4()
    {
        //这里发现只能得到一个网络流,没有其他信息了。(比如,文件大小、文件格式、文件名等)
        Request.SaveAs(Server.MapPath("~/App_Data/SaveFile4.data") + "", false);
        return "保存成功";
    }
    

    稳重的你发觉并未有了表单格式,我们除了能够上传文件流数据外,不可能再报告后台别的音信了(如文件格式)。
    到此地,笔者如同知道了原先上传文件为什么非得要用个form包起来,原本那只是和后台约定的三个传输格式而已。
    其实大家只是的用jq的ajax传输文本数据的时候,最后也是建构形成了form格式的多寡,如:

     $.ajax({
        data: { "userName": "张三" } 
    

    分片上传

    在知晓了地点的种种上传之后,大家是或不是就满于现状了吗?no,比相当多时候大家需求传输大文件,日平常衣服务器都会有肯定的深浅限制。
    某天,你发觉了四个激情小电影想要共享个大家。无可奈何,高清文件太大传不了,如何做?大家得以化整为零,豆蔻梢头部总局分的传嘛,也正是所谓的分片上传。
    前面一个代码:

    <input type="file" id="file6" multiple>
    <button type="button" class="btnFile6">分片上传6</button>
    <div class="result"></div>
    
    //方式6
     $(".btnFile6").click(function () { 
         var upload = function (file, skip) {
             var formData = new FormData();//初始化一个FormData对象
             var blockSize = 1000000;//每块的大小
             var nextSize = Math.min((skip + 1) * blockSize, file.size);//读取到结束位置             
             var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 块
             formData.append("file", fileData);//将 部分文件 塞入FormData
             formData.append("fileName", file.name);//保存文件名字
             $.ajax({
                 url: "/Home/SaveFile6",
                 type: "POST",
                 data: formData,
                 processData: false,  // 告诉jQuery不要去处理发送的数据
                 contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                 success: function (responseText) {
                     $(".result").html("已经上传了" + (skip + 1) + "块文件");
                     if (file.size <= nextSize) {//如果上传完成,则跳出继续上传
                         alert("上传完成");
                         return;
                     }
                     upload(file, ++skip);//递归调用
                 }
             });
         };
    
         var file = $("#file6")[0].files[0];
         upload(file, 0);
     }); 
    

    后台代码:

    public string SaveFile6()
    {
        //保存文件到根目录 App_Data + 获取文件名称和格式
        var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];
        //创建一个追加(FileMode.Append)方式的文件流
        using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                //读取文件流
                BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
                //将文件留转成字节数组
                byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
                //将字节数组追加到文件
                bw.Write(bytes);
            }
        }
        return "保存成功";
    }
    

    绝对来说,代码量多了有个别,复杂了有个别。可是相对于英特网的任何分片上传的代码应该要轻巧得多(因为此地未有考虑多文本块相同的时候上传、断点续传。那样就须求在后台把文件块排序,然后上传达成按序合併,然后删除原本的有的时候文件。风野趣的同窗能够团结探求,稍候在分条析理上传插件webuploader的时候也会促成)。
    效果图:
    图片 2
    【表明】:要是我们想要上传四个文本如何是好?其实H5中也提供了很简单的点子。直接在input里面标识multiple<input type="file" id="file6" multiple>,然后大家后台接受的也是三个数组Request.Files

    使用HTML5 拖拽、粘贴上传

    不得不说H5真是强盛啊,权限更大,操作更是牛逼。
    前端代码(拖拽上传):

    <textarea class="divFile7" style="min-width:800px;height:150px" placeholder="请将文件拖拽或直接粘贴到这里"></textarea>
    
    //方式7
     $(".divFile7")[0].ondrop = function (event) {
    
         event.preventDefault();//不要执行与事件关联的默认动作
         var files = event.dataTransfer.files;//获取拖上来的文件
    
         //以下代码不变
         var formData = new FormData();//初始化一个FormData对象
         formData.append("files", files[0]);//将文件塞入FormData
         $.ajax({
             url: "/Home/SaveFile2",
             type: "POST",
             data: formData,
             processData: false,  // 告诉jQuery不要去处理发送的数据
             contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
             success: function (responseText) {
                 alert(responseText);
             }
         });
     };
    

    后台代码:
    略(和事先的SaveFile2同样)

    前端代码(粘贴上传 限图片格式):

    //方式8
    $(".divFile7")[0].onpaste = function (event) {
        event.preventDefault();//不要执行与事件关联的默认动作
        var clipboard = event.clipboardData.items[0];//剪贴板数据
        if (clipboard.kind == 'file' || clipboard.type.indexOf('image') > -1) {//判断是图片格式
            var imageFile = clipboard.getAsFile();//获取文件
    
            //以下代码不变
            var formData = new FormData;
            formData.append('files', imageFile);
            formData.append('fileName', "temp.png");//这里给文件命个名(或者直接在后台保存的时候命名)
            $.ajax({
                url: "/Home/SaveFile8",
                type: "POST",
                data: formData,
                processData: false,  // 告诉jQuery不要去处理发送的数据
                contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                success: function (responseText) {
                    alert(responseText);
                }
            });
        }
    };
    

    后台代码:

    public string SaveFile8()
    {
        //保存文件到根目录 App_Data + 获取文件名称和格式
        var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"];      
        if (Request.Files.Count > 0)
        {
            Request.Files[0].SaveAs(filePath);
            return "保存成功";
        }
        return "没有读到文件";
    }
    

    效果图:
    图片 3

    上传插件(WebUploader)

    已经列举深入分析了种种上传文件的艺术,作者想总有后生可畏种切合您。可是,上传这些职能比较通用,而我们团结写的或许过多景观并没有思考到。接下来简要介绍下百度的WebUploader插件。
    比起大家和好写的简练上传,它的优势:牢固、宽容性好(有flash切换,所以支持IE)、作用多、并发上传、断点续传(首要依然靠后台协作)。
    官网:
    插件下载:
    下边开头对WebUploader的施用
    第龙腾虎跃种,轻易残暴
    前端代码:

    <div id="picker">选择文件</div>
    <button id="ctlBtn" class="btn btn-default">开始上传</button>
    
    <!--引用webuploader的js和css-->
    <link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
    <script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript">
        var uploader = WebUploader.create({
    
            // (如果是新浏览器 可以不用 flash)
            //swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
    
            // 文件接收服务端。
            server: '/Webuploader/SaveFile',
    
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: '#picker'
        });
    
        $("#ctlBtn").click(function () {
            uploader.upload();
        });
    
        uploader.on('uploadSuccess', function (file) {
            alert("上传成功");
        });
    
    </script>
    

    后台代码:

    public string SaveFile()
    {
        if (Request.Files.Count > 0)
        {
            Request.Files[0].SaveAs(Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName));
            return "保存成功";
        }
        return "没有读到文件";
    }
    

    第三种,分片上传。和我们此前本身写的功效差非常少。
    前者代码:

    var uploader = WebUploader.create({ 
        //兼容老版本IE
        swf: '/Scripts/webuploader-0.1.5/Uploader.swf', 
        // 文件接收服务端。
        server: '/Webuploader/SveFile2', 
        // 开起分片上传。
        chunked: true, 
        //分片大小
        chunkSize: 1000000, 
        //上传并发数
        threads: 1,
        // 选择文件的按钮。 
        pick: '#picker'
    });
    
    // 点击触发上传
    $("#ctlBtn").click(function () {
        uploader.upload();
    });
    
    uploader.on('uploadSuccess', function (file) {
        alert("上传成功");
    });
    

    后台代码:

    public string SveFile2()
    {
        //保存文件到根目录 App_Data + 获取文件名称和格式
        var filePath = Server.MapPath("~/App_Data/") + Path.GetFileName(Request.Files[0].FileName);
        //创建一个追加(FileMode.Append)方式的文件流
        using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                //读取文件流
                BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
                //将文件留转成字节数组
                byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
                //将字节数组追加到文件
                bw.Write(bytes);
            }
        }
        return "保存成功";
    }
    

    咱俩见到了有个参数threads: 1上传并发数,假使大家改成大于1会怎么样?前端会同不经常候提倡三个文件片上传。后台就能够报错,八个进程同期操作三个文本。
    那如果大家想要十二线程上传如何是好?改代码吧(主尽管后台逻辑)。
    前面叁个代码:

    //并发上传(多线程上传)
    var uploader = WebUploader.create({
        //兼容老版本IE
        swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '/Webuploader/SveFile3',
        // 开起分片上传。
        chunked: true,
        //分片大小
        chunkSize: 1000000,
        //上传并发数
        threads: 10,
        // 选择文件的按钮。
        pick: '#picker'
    });
    
    // 点击触发上传
    $("#ctlBtn").click(function () {
        uploader.upload();
    });
    
    uploader.on('uploadSuccess', function (file) {
        //上传完成后,给后台发送一个合并文件的命令
        $.ajax({
            url: "/Webuploader/FileMerge",
            data: { "fileName": file.name },
            type: "post",
            success: function () {
                alert("上传成功");
            }
        });
    });
    

    后台代码:

    public string SveFile3()
    {
        var chunk = Request.Form["chunk"];//当前是第多少片 
    
        var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(Request.Files
        if (!Directory.Exists(path))//判断是否存在此路径,如果不存在则创建
        {
            Directory.CreateDirectory(path);
        }
        //保存文件到根目录 App_Data + 获取文件名称和格式
        var filePath = path + "/" + chunk;
        //创建一个追加(FileMode.Append)方式的文件流
        using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                //读取文件流
                BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
                //将文件留转成字节数组
                byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
                //将字节数组追加到文件
                bw.Write(bytes);
            }
        }           
        return "保存成功";
    }
    
    /// <summary>
    /// 合并文件
    /// </summary>
    /// <param name="path"></param>
    /// <returns></returns>
    public bool FileMerge()
    {
        var fileName = Request.Form["fileName"];
        var path = Server.MapPath("~/App_Data/") + Path.GetFileNameWithoutExtension(fileName);
    
        //这里排序一定要正确,转成数字后排序(字符串会按1 10 11排序,默认10比2小)
        foreach (var filePath in Directory.GetFiles(path).OrderBy(t => int.Parse(Path.GetFileNameWithoutExtension(t))))
        {
            using (FileStream fs = new FileStream(Server.MapPath("~/App_Data/") + fileName, FileMode.Append, FileAccess.Write))
            {
                byte[] bytes = System.IO.File.ReadAllBytes(filePath);//读取文件到字节数组
                fs.Write(bytes, 0, bytes.Length);//写入文件
            }
            System.IO.File.Delete(filePath);
        }
        Directory.Delete(path);
        return true;
    }
    

    到那边您感觉就得了了呢?错,还也会有不菲情状未有虚拟到。倘若四个客户上传的公文名字如出龙腾虎跃辙会怎么样?怎么样贯彻断点续传?还没达成选取多个文件?不过,这里不企图延续贴代码了(再贴下去,代码量更加的多了),自个儿也来演习练习吧。
    提供一个思路,上传前先往数据库插入一条数据。数据满含文件要存的门径、文件名(用GUID命名,防止同名文件冲突)、文件MD5(用来甄别后一次续传和秒传)、偶尔文件块贮存路径、文件是或不是完整上传成功等新闻。
    下一场假设大家断网后再传,首先猎取文件MD5值,看数据Curry面有没上传完毕的公文,借使有就完毕秒传。若无,看是或不是有上传了后生可畏都部队分的。如果有接着传,若无则重复传八个新的文本。

    总结

    前边作者一向很纠缠,为何上传文件必定要用form包起来,今后算是差不离知道了。
    最初始在javascript还不流行时,我们就能够平昔运用submit开关提交表单数据了。表单里面能够分包文字和文件。然后趁着js和ajax的风行,能够应用ajax直接异步提交部分表单数据。这里初叶本人就纠缠了,为何ajax可以交到本人组装的数据。那为何不能够直接付出文件呢。这里小编错了,ajax提交的并非轻便的数目,最后依旧组装成了表单格式(因为后台手艺对表单格式数据的支撑比较广泛)。但是现存的本领还不可能经过js组装三个文件格式的表单数据。直到H5中的FormData出现,让前端js组装贰个满含文件的表单格式数据形成了说不定。所以说表单只是为着满意和后台“约定”的数目格式而已。

     

    连锁推荐

    demo

    • https://github.com/zhaopeiym/Blog德姆oCode/tree/master/上传下载

     

    本文由9159金沙官网发布于金沙澳门9159官网,转载请注明出处:【转】文件各种上传,离不开的表单

    关键词: