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来处理传递过来的文件和参数,请网上自行查阅资料。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。