您的位置:银河国际手机网址2949 > 银河2949s官网 > 【转】文件各种上传,离不开的表单

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

发布时间:2019-10-11 18:19编辑:银河2949s官网浏览(168)

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

    作为技师的大家,平常会要用到文件的上传和下载功能。到了供给用的时候,种种查资料。有木有..有木有...。为了方便后一次选取,这里来做个总结和备忘。

    使用表单达成公文上传

    最原始、最轻便易行、最残忍的文件上传。
    前端代码:

    //方式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 "没有读到文件";
    }
    

    【转】文件各种上传,离不开的表单。原理:
    笔者们不菲时候利用了插件,就随意其余三七二十一啊。
    只要有一点好奇心,想想那一个插件是怎么落到实处的。随意看了看源码1000五百多行。笔者的妈啊,不就是个异步上传吗,怎么如此复杂。
    【转】文件各种上传,离不开的表单。难以见到个怎样鬼来,间接断点调节和测量试验下呢。
    图片 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/上传下载

     

    本文由银河国际手机网址2949发布于银河2949s官网,转载请注明出处:【转】文件各种上传,离不开的表单

    关键词:

上一篇:没有了

下一篇:没有了