zoukankan      html  css  js  c++  java
  • MVC ajax 上传文件

    废话不多说,上代码:

    用到的js文件:

    jquery.min.js

    jquery.easyui.min.js

    <input id="fileurl" onclick="$('#imageUpLoad').click();"/>
    <input type="button" value="上传" onclick="document.getElementById('form1').submit();">   
    
    <div style="display:none; position:absolute; top:0; left:0;">
    <iframe name="uploadResponse"></iframe>
        <form id="form1" runat="server" action="/UploadFile/UpLoadImage/" method="post" enctype="multipart/form-data" target="uploadResponse"> 
            <input type="file" id="imageUpLoad"  name="imageUpLoad" style="display:none;" onchange="$('#fileurl').attr('isLoad','0');"> 
            <input id="imageType" name="imageType" value="floor" style="display:none;"/>
        </form>
        <script type="text/javascript">
            function CallBack(path) {
                $("#fileurl").attr('isLoad', '1').val(path);
                $.messager.alert('提示信息', '上传成功!', 'info');
            }     
        </script>
    </div>

    isLoad 属性是我自己添加的属性,用来判断图片是否提交

    ps:记得在window.load事件中初始化这个属性,因为低版本的ie不支持<input isLoad="1"/>这种格式

    后台代码

    using System.Web;
    using System.Web.Mvc;public class UploadFileController : Controller
        {
            //
            // GET: /UploadFile/
    
            public ActionResult Index()
            {
                return View();
            }
    
            public void UpLoadImage(HttpPostedFileBase imageUpLoad, string imageType)
            {
                string returnFilePath = imageUpLoad.FileName;
                //这里是我自己写的一段创建文件路径并保存的代码,可以直接imageUpLoad.SaveAs("文件路径");来保存
                Helper.SaveFile(imageUpLoad, Helper.FileType.Images, imageType, ref returnFilePath); returnFilePath = returnFilePath.Replace("\", "/"); Response.Write(string.Format("<script type='text/javascript'>window.parent.CallBack('" + returnFilePath + "');</script>"));
            }
        }
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.IO;
    
    public class Helper
    {  

        /// <summary>
        /// 文件类型
        /// </summary>
        public enum FileType {
          Images,
          Files
        }

        public static bool SaveFile(HttpPostedFileBase f, FileType ft, string separator,ref string path)
            {
                try
                {
                    string FilePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, ft.ToString());
                    if (!Directory.Exists(FilePath))
                        Directory.CreateDirectory(FilePath);
    
                    FilePath = Path.Combine(FilePath, separator);
                    if (!Directory.Exists(FilePath))
                        Directory.CreateDirectory(FilePath);
    
                    FilePath = Path.Combine(FilePath, path);
                    f.SaveAs(FilePath);
                    path = Path.Combine(ft.ToString(), separator, path);
                    return true;
                }
                catch (Exception ex){
                    LogHelper.Error(ex);
                }
                return false;
            }
    }

    这里主要说明一下html界面form的参数:

    action : 你的mvc处理文件上传的路径

    method:提交方式

    enctype:这个一定要写对“multipart/form-data”

    target:值“uploadResponse”表示回传的接收页面地址,这里是一个iframe,避免了回传刷新页面

    后台cs代码说明:

    UpLoadImage:方法名要和地址一致
    参数:
    HttpPostedFileBase imageUpLoad  
    imageUpLoad 应该是上传文件控件的name值
    string imageType

    同上iamgeType 为文本控件的name值
    如果你有多个参数需要传递到后台,可以按照这个格式自定义参数个数

    当然还有一种方法可以放函数不带参数
    使用request来处理传递过来的文件和参数,请网上自行查阅资料。
  • 相关阅读:
    SpringMVC中静态获取request对象 Spring中获取 HttpServletRequest对象【转载】
    springcloud 的loadbalancer 轮询算法切换方法 2021.4.3
    springboot项目启动增加图标
    rabbitmq 端口作用以及修改方法
    centos8 安装rabbitmq
    springcloud config client Value获取不到信息的问题的处理方法
    springcloud config配置git作为数据源然后启动报错 If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    Sublime Text的列模式如何操作
    centos8 安装redis
    jQuery简单的Ajax调用
  • 原文地址:https://www.cnblogs.com/liumang/p/4445284.html
Copyright © 2011-2022 走看看