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來處理傳遞過來的文件和參數，請網上自行查閱資料。