ashx 上传文件功能 httppostfile 获取不到_Bootstrap Fileinput上传控件示例
示例项目结构 web页面 接口返回的信息
发布日期:2021-06-24 11:40:46
浏览次数:3
分类:技术文章
本文共 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//作者:宋康
如此这般就可以在前端页面上看到我们的这个上传模块了,如下图:
之前在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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月10日 10时36分40秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
TIOBE 4 月榜单 C 和 JAVA 几乎持平
2019-04-28
讲真,WiFi 6到底6在哪儿
2019-04-28
简单上手GDB调试
2019-04-28
ARMv8-M相比ARMv7-M架构优势在哪里?
2019-04-28
PCB差分信号设计中的3个常见误区
2019-04-28
进程和线程常见的19个问题
2019-04-28
Keil MDK 和 IAR EARM发展历程及历史版本下载
2019-04-28
精选汇总 | 嵌入式软件基础知识
2019-04-28
为什么大家都看好RISC-V
2019-04-28
Keil MDK利用 fromelf 实现axf 转 bin 的方法
2019-04-28
【APICloud系列|12】ios真机调试时如何添加新设备的udid?
2019-04-28
前端开发必备的1个CSS框架
2019-04-28
【APICloud系列|13】移动端适配通揽
2019-04-28
常用的视频下载网站
2019-04-28
问题:三元向量的比较
2019-04-28
C++ 在屏幕上用星号打印菱形
2019-04-28
使用微信开发者工具添加小程序底部导航栏报错
2019-04-28
Android killer软件闪退的解决办法?
2019-04-28
eclipse中在类saolei.Test 中找不到main方法
2019-04-28
安卓车机没有ADB调试,任意安装第三方软件教程
2019-04-28