• 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来处理传递过来的文件和参数,请网上自行查阅资料。
  • 相关阅读:
    DOM对象和JQuery对象的区别
    处理android手机html5页面中,点击text文本框无法自动获取焦点的处理方法
    ORACLE之VBO-5530无法删除用户的解决办法
    当oracle clob类型不能和group by并用,但是需要去除多列重复
    Android 4主线程访问网络
    Android: How to get Address from geolocation using Geocoder
    解决乱码的最后方法
    tomcat启动时自动运行代码
    android 组件隐蔽显示状态
    android模拟器Genymotion 连接eclipse项目
  • 原文地址:https://www.cnblogs.com/liumang/p/4445284.html
Copyright © 2020-2023  润新知