ashx 上传文件功能 httppostfile 获取不到_Bootstrap Fileinput上传控件示例-白红宇的个人博客

ashx 上传文件功能 httppostfile 获取不到_Bootstrap Fileinput上传控件示例

发布日期：2021-06-24 11:40:46 浏览次数：2 分类：技术文章

本文共 3175 字，大约阅读时间需要 10 分钟。

哇,好久没更新知乎的文章了.

上周接了一个上古.NET项目的维护,有需要增加一个功能模块,里面恰好有一个需要上载文件的功能.

于是我使用了Bootstrap FileInput,这是一款风格合我眼光的上传控件,但是要适配c#的话,在国内的论坛翻了很多遍,也没有一个讲的清楚的,弄好项目只好琢磨一下.于是自己来写一个完整示例版本吧.

1.首先我们看一下项目的结构;

示例项目结构

其中Modules下放得html,scripts下存放的就是需要用到的js.

dataservice.ashx则是一个简易的后台.

其他文件都是项目生成的,我们先不管.

2.开始讲一下fileinput的使用方法,贴一下Html文件

    
             
                 
                 
             
             
                  
       FileInput上传用例

需要看的就是下面这一行.标准的fileinput标签.

在添加的fileinput.js中开始初始化id="inputfile"这个标签. 在js种写法如下:

$(function () {
        Init();});function Init() {
        fileInit();}function fileInit() {
        $("#inputfile").fileinput({
            language: "zh",        uploadUrl: "../dataservice.ashx",  //点击上传请求的后台地址        allowedFileExtensions: ['xls', 'xlsx', 'docx'], //允许上传的文件格式        initialPreviewCount: 5,        initialPreview: [],        initialPreviewAsData: true,        initialPreviewConfig: [],        maxFileCount: 5,        deleteUrl: "/site/file-delete",    //删除操作的URL地址        overwriteInitial: true,           //不允许覆盖初始的预览，所以添加文件时不会覆盖        maxFileSize: 10000,                  //文件最大不超过100KB        initialCaption: ""       //默认名称    }).on("fileuploaded", function (event, data, previewId, index) {
            //回调函数逻辑    });}//邮箱:songkang@bingosoft.net//作者:宋康

如此这般就可以在前端页面上看到我们的这个上传模块了,如下图:

web页面

之前在fileinput.js的初始化函数中定义了上传调用的url,即:

uploadUrl: "../dataservice.ashx",  //点击上传请求的后台地址

这代表调用上一级目录下的dataservice.ashx.我们看一下dataservice.ashx中的内容:

using System.Web;using Newtonsoft.Json;using Newtonsoft.Json.Linq;namespace fileinput{
        ///     /// dataservice 的摘要说明    /// 
    public class dataservice : IHttpHandler    {
            public void ProcessRequest(HttpContext context)        {
                context.Response.Write(ImportFile()); //返回结果        }        public bool IsReusable        {
                get            {
                    return false;            }        }        public JObject ImportFile()        {
                var oStream = HttpContext.Current.Request.Files; //拿到上传的文件流            string jsonText = "{data:[";            for (int i = 0; i < oStream.Count; i++)            {
                    HttpPostedFile PostedFile = oStream[i];                if (PostedFile.ContentLength > 0)                {
                        string FileName = PostedFile.FileName;                    string strPath = "H:" + "testImport"; //上载路径                    PostedFile.SaveAs(strPath + FileName);                    jsonText += "{"caption":"" + FileName + "","size":"" + PostedFile.ContentLength + "","width":"120px","key":"" + i + 1 + ""},";                }            }            jsonText += "]}"; //拼接最后要接收的json字符串            JObject jo = (JObject)JsonConvert.DeserializeObject(jsonText);            return jo;        }    }}

这样我们就可以轻松的上载文件到服务器的指定路径啦,看一下我们接口返回的数据.

接口返回的信息

{
      "data": [    {
          "caption": "20190304-子系统数据统计表文档统-v4.xlsx",      "size": "12868",      "width": "120px",      "key": "01"    }  ]}

我把项目文件打包放到了我的云服务器上,给出一个下载地址:

http://47.107.224.128:8080/bear/downfile/fileinput.zip47.107.224.128:8080

有疑问的可以发邮件或者私信.

转载地址：https://blog.csdn.net/weixin_32553639/article/details/113045306 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：mysql a b c_实现mysql的a-b-b ,a-b-c结构

下一篇：.stream()获取list的指定两列值_JDK1.8新特性(六)：Stream终极操作，轻松解决集合分组等复杂操作...

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

FileInput上传用例

发表评论

最新留言

关于作者

推荐文章