• eHR工具箱分享一个.NET版的多选文件上传操作示例


      文件上传,无刷新上传,文件批量上传,批量无刷新上传,这些词这年头好像非常多,不管那种上传能满足实际的需求就是好的,一般上传文件时,点文件浏览框,只能选择单个文件,如果要上传多个,浏览多次,然后点击批量上传就可以了,也很好的,也不刷新也有进度显示,完全不错的。网上也有关于上传文件的能够多选的例子,点浏览时可以按住ctrl键或者shift键选择多个,然后上传。但是好像这样的.NET版的不多,朋友发我一个整理过的Demo,之后我又稍微整理了下,觉得还好,可以分享给大家一下,好与不好就不说,因为没有完美的东西,能适用于大家的某些实际需求就行了。先说下这个方式上传的机制主要也是和一般的无刷新上传一样嵌了一个swf文件,同过js调用达到无刷新效果(测试Demo文章结束处下载)

    (1)浏览上传文件框可以设置文件过滤格式:

    if(form1.ddlFileType.value=="p")
                    {
                        size_limit = "0"; // 1M = 1048576;
                        types = "*.jpg; *.bmp; *.gif;";
                        types_description = "图像文件";
                    }
    else if(form1.ddlFileType.value=="a")
                    {
                        size_limit = "0";
                        types = "*.mp3; *.wmv";
                        types_description = "音频文件";
                    }
    else if(form1.ddlFileType.value=="r")
                    {
                        size_limit = "0";
                        types = "*.rm; *.avi; *.mpeg; *.rmvb;*.wmv; *.dat";
                        types_description = "视频文件";
                    }
    else
                    {
                        size_limit = "0";
                        types = "*.*";
                        types_description = "所有文件";
                    }        

    (2)点开选择文件按钮,弹出文件浏览框,选择文件双击鼠标或点右下角的打开按钮的同事就进行了相关操作,主要是把浏览的文件先以文件流的格式缓冲起来(简单的用session缓冲下),如下图:

       上面其实选择多个文件点点打开后js隐含执行了一个按钮的onclick事件。执行完成后各个文件会列出到列表中,如下图:

       完整的测试截图如下(比较简陋:))

    config配置里,最大可以上传2G的文件,选择三个稍大点文件截个效果图,如下:

    点击保存按钮后才是将文件上传至对应的文件夹和进行数据库写入操作。

       写完了我才发现,在我向博客里插入图片时,原来博客园上的插入图片上传等就是可以多选的了,呵呵,功能效果上和这非常相似。

      demo及源码下载 :多选文件上传(.NET版)

      附加说明:选择文件类型时,必须要重新加载页面,也尝试过同过下拉的onchange事件来处理,让其不刷新页面,但是不可行,另外上传大文件过程中如要取消当前的文件,同时让其接着上传下一个文件,这点还没做处理,应该说是两个遗留问题吧。如果要运行程序,可能要安装一下aspnetajax,删除和请清空用的updatepanel,如果不安装要看效果,把页面的scriptmanager和updatepanel控件去条,config里注释掉同时把原有注释的放开就可以了。

  • 相关阅读:
    node
    ionic
    关于websocket和ajax无刷新
    HTML图片热区
    npm -D -S -g -i 以及安装技巧
    es6 webpack转es5
    es6
    es6
    ssh tunnel
    vim上次和下次光标位置
  • 原文地址:https://www.cnblogs.com/zhukezhuke/p/1555629.html
Copyright © 2020-2023  润新知