原文: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:只能上传键值对,并且键值对都是间隔分开的。

一、前端代码

  1. @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new {enctype = "multipart/form-data"}))
  2. {
  3. <div>文件上传:<input type="file" name="myFile"/></div>
  4. <input type="submit" value="提交"/>
  5. }
         //类似的使用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;
            }
        }
    }
  6.  
  7. 以及表单的2种写法:
<form method="post" action="~/Areas/seal/Views/register/Index.cshtml" enctype="multipart/form-data">
    <input type="text" name="desc">
    <input type="file" name="pic">
</form>

二、后台代码

  1. /// <summary>
  2. /// 上传文件
  3. /// </summary>
  4. /// <returns>上传文件结果信息</returns>
  5. [HttpPost]
  6. public ActionResult UploadFile()
  7. {
  8. HttpPostedFileBase file = Request.Files["myFile"];
           //接收文本
  9.  
  10. if (file != null)
  11. {
  12. try
  13. {
  14. var filename = Path.Combine(Request.MapPath("~/Upload/Image/"), file.FileName);
  15. file.SaveAs(filename);
  16. return Content("上传成功");
  17. }
  18. catch (Exception ex)
  19. {
  20. return Content(string.Format("上传文件出现异常:{0}", ex.Message));
  21. }
  22.  
  23. }
  24. else
  25. {
  26. return Content("没有文件需要上传!");
  27. }
  28. }

三、根据地址显示图片

方法1:

前台:

  1. <img src="/controller/action"/>
    或者<img alt="Chart" id="change" src="@Url.Action("action", "Register", new { ViewBag.id ,v = DateTime.Now.ToString("yyyyMMddhhmmss")})" />

后台:

  1. public ActionResult Action()
  2. {
  3. string path = "读取数据库里面的图片路径";
  4. byte[] img = System.IO.File.ReadAllBytes(path);//将图片读入字节数组
  5. return new FileContentResult(img, "image/jpeg");//返回图片
  6. }

方法2:

  1. <img alt="你好" id="change1" style='width:100px; height:80px' />
  1. //js赋值,文件存放在更目录下
    window.$("#change1").attr("src", "/Upload/Image" + pathname);
    //设置为非必需填写
    $('#change1).filebox({ required: false });
  2.  
  3. //鼠标悬浮时放大图片并水平居中
    <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 图片上传和显示的更多相关文章

  1. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  2. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  3. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  4. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  5. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  6. 图片上传并显示(兼容ie),图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  7. ASP.NET MVC下使用文件上传

    这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解压,将组件包拷贝到MVC项目中 3.  根目录下添加新 ...

  8. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  9. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  10. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

随机推荐

  1. MySQL数据库3分组与单表、多表查询

    目录 一.表操作的补充 1.1null 和 not null 1.2使用not null的时候 二.单表的操作(import) 2.1分组 2.1.1聚合函数 2.1.2group by 2.1.3h ...

  2. python-jsonpath、findall返回值提取

    findall import re """ "d"表示取数字0-9, "D"表示不要数字, "w"在正则里面代 ...

  3. mysql SELECT INTO语句 语法

    mysql SELECT INTO语句 语法 作用:用于创建表的备份复件. 语法:SELECT * INTO new_table_name [IN externaldatabase]  FROM ol ...

  4. luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra

    题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下   时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...

  5. Manacher模板( 线性求最长回文子串 )

    模板 #include<stdio.h> #include<string.h> #include<algorithm> #include<map> us ...

  6. 使用chooseImage上传图片,不压缩,使用原图

    参考文章: https://help.aliyun.com/document_detail/92883.html

  7. HDU6599 (字符串哈希+回文自动机)

    题意: 求有多少个回文串的前⌈len/2⌉个字符也是回文串.(两组解可重复)将这些回文串按长度分类,分别输出长度为1,2,...,n的合法串的数量. 题解:https://www.cnblogs.co ...

  8. SqlServer2012 File Table文件表

    SQL Server 2012 提供一种特殊的“文件表”,也称为“FileTable”. FileTable 是一种专用的用户表,它包含存储 FILESTREAM 数据的预定义架构以及文件和目录层次结 ...

  9. Ubuntu中几个字符小玩意儿

    1.黑客帝国特效: 打开终端,输入 sudo apt install cmatrix 即可.安装完成后,在终端输入 cmatrix 即可出现特效. 2.奔跑的小火车: 终端输入:sudo apt in ...

  10. 【转】一个 Vim 重度用户总结的 vim 超全指南

    [转]一个 Vim 重度用户总结的 vim 超全指南 我本人是 Vim 的重度使用者,就因为喜欢上这种双手不离键盘就可以操控一切的feel,Vim 可以让我对文本的操作更加精准.高效. 对于未使用过 ...