c# ASP.NET MVC easyui-filebox 图片上传和显示
原文:https://www.cnblogs.com/huatao/p/4727398.html
https://www.cnblogs.com/weiweithe/p/4363458.html
表单multipart/form-data与x-www-form-urlencoded区别
multipart/form-data:既可以上传文件等二进制数据,也可以上传表单键值对,只是最后会转化为一条信息;
x-www-form-urlencoded:只能上传键值对,并且键值对都是间隔分开的。
一、前端代码
- @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
- {
- <div>文件上传:<input type="file" name="myFile"/></div>
- <input type="submit" value="提交"/>
- }
//类似的使用easyui
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
{
<div class="div-group">
<input id="txtSignPhoto" class="easyui-filebox" name="SignPhoto" style="width: 90%"
data-options="label:'签字文件:',required:true,buttonText:'选择文件',prompt:'仅支持图片、xls、doc和docx格式',onChange:function(){checkFile(2)}"/>
</div>
}
//编写JS方法checkFile()验证文件格式
function checkFile(a) //检查文件
{
var fileTypes = ['.jpg', '.jpeg', '.bmp', '.png', '.gif', 'psd', '.rar', '.zip', '.doc', '.docx', 'wps', '.xls', '.xlsx', '.txt', '.pdf'];
var filePath;
if (a === 1)
filePath = window.$('#txtSignPhoto').textbox('getValue');
if (filePath !== '') {
var flag = false;
var fileType = filePath.substring(filePath.lastIndexOf("."));
if (fileTypes.length > 0) {
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] === fileType) {
flag = true;
break;
}
}
}
if (!flag) {
alert('不接受' + fileType + '文件类型上传');
if (a === 1)
window.$('#UploadFile').textbox('setValue', '');
return;
}
}
}- 以及表单的2种写法:
二、后台代码

- /// <summary>
- /// 上传文件
- /// </summary>
- /// <returns>上传文件结果信息</returns>
- [HttpPost]
- public ActionResult UploadFile()
- {
- HttpPostedFileBase file = Request.Files["myFile"];
//接收文本- if (file != null)
- {
- try
- {
- var filename = Path.Combine(Request.MapPath("~/Upload/Image/"), file.FileName);
- file.SaveAs(filename);
- return Content("上传成功");
- }
- catch (Exception ex)
- {
- return Content(string.Format("上传文件出现异常:{0}", ex.Message));
- }
- }
- else
- {
- return Content("没有文件需要上传!");
- }
- }

三、根据地址显示图片
方法1:
前台:
- <img src="/controller/action"/>
或者<img alt="Chart" id="change" src="@Url.Action("action", "Register", new { ViewBag.id ,v = DateTime.Now.ToString("yyyyMMddhhmmss")})" />
后台:
- public ActionResult Action()
- {
- string path = "读取数据库里面的图片路径";
- byte[] img = System.IO.File.ReadAllBytes(path);//将图片读入字节数组
- return new FileContentResult(img, "image/jpeg");//返回图片
- }
方法2:
- <img alt="你好" id="change1" style='width:100px; height:80px' />
- //js赋值,文件存放在更目录下
window.$("#change1").attr("src", "/Upload/Image" + pathname);
//设置为非必需填写
$('#change1).filebox({ required: false });- //鼠标悬浮时放大图片并水平居中
<style type="text/css">
img:hover {
transform: scale(22, 15);
vertical-align: middle;
display: inline;
position: absolute;
top: 50%;
left: 50%;
}
</style>
c# ASP.NET MVC easyui-filebox 图片上传和显示的更多相关文章
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- 图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3. 根目录下添加新 ...
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件 This project attempts to ach ...
随机推荐
- MySQL数据库3分组与单表、多表查询
目录 一.表操作的补充 1.1null 和 not null 1.2使用not null的时候 二.单表的操作(import) 2.1分组 2.1.1聚合函数 2.1.2group by 2.1.3h ...
- python-jsonpath、findall返回值提取
findall import re """ "d"表示取数字0-9, "D"表示不要数字, "w"在正则里面代 ...
- mysql SELECT INTO语句 语法
mysql SELECT INTO语句 语法 作用:用于创建表的备份复件. 语法:SELECT * INTO new_table_name [IN externaldatabase] FROM ol ...
- luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra
题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下 时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...
- Manacher模板( 线性求最长回文子串 )
模板 #include<stdio.h> #include<string.h> #include<algorithm> #include<map> us ...
- 使用chooseImage上传图片,不压缩,使用原图
参考文章: https://help.aliyun.com/document_detail/92883.html
- HDU6599 (字符串哈希+回文自动机)
题意: 求有多少个回文串的前⌈len/2⌉个字符也是回文串.(两组解可重复)将这些回文串按长度分类,分别输出长度为1,2,...,n的合法串的数量. 题解:https://www.cnblogs.co ...
- SqlServer2012 File Table文件表
SQL Server 2012 提供一种特殊的“文件表”,也称为“FileTable”. FileTable 是一种专用的用户表,它包含存储 FILESTREAM 数据的预定义架构以及文件和目录层次结 ...
- Ubuntu中几个字符小玩意儿
1.黑客帝国特效: 打开终端,输入 sudo apt install cmatrix 即可.安装完成后,在终端输入 cmatrix 即可出现特效. 2.奔跑的小火车: 终端输入:sudo apt in ...
- 【转】一个 Vim 重度用户总结的 vim 超全指南
[转]一个 Vim 重度用户总结的 vim 超全指南 我本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让我对文本的操作更加精准.高效. 对于未使用过 ...