文件上传

css

<style>
    .a-upload {
        width: 50px;
        height: 28px;
        padding: 2px 10px 4px;
        color: #333333;
        background: #f5f5f5;
        border: 1px solid #adadad;
        border-radius: 4px;
        display: inline-block;
    }

        .a-upload input {
            position: absolute;
            opacity: 0;
            height: 28px;
        }

        .a-upload:hover {
            color: #333333;
            background: #d6d6d6;
            border-color: #adadad;
            text-decoration: none
        }
</style>

html

<form class="validateForm" id="gridInfoForm" enctype="multipart/form-data" onLoad="javascript:document.yourFormName.reset()">
<div>
    <div>
        <label for="selImageFileId">文件</label>
        <input type="text" id="selImageFileId" name="selImageFileId" class="form-control form-control-custom" readonly />
    </div>
    <div>
        <a href="#" class="a-upload">
            <input type="file" id="ImageFiles" name="ImageFiles" accept="image/*" onchange="selFileChange(this);">选择
        </a>
    </div>
</div>

<button type="button" onclick="fileUpload()">更新</button>
</form>

js

/* ━━━━━━━━━━━━━━━━━━━━━━
 * 文件选择
 * ━━━━━━━━━━━━━━━━━━━━━━*/
function selFileChange(target) {
    var selFileSize = 0;
    var selFiletypes = [".tiff", ".pip", ".jfif", ".bmp", ".gif", ".svg", ".png", ".xbm", ".dib", ".jxl", ".jpeg", ".svgz", ".jpg", ".webp", ".ico", ".tif", ".pjpeg", ".avif"];
    var selFilepath = target.value;
    var selFilemaxsize = 1024 * 2;//2M
    //判断文件是否为图片格式
    if (selFilepath) {
        var isnext = false;
        var fileend = selFilepath.substring(selFilepath.indexOf("."));
        if (selFiletypes && selFiletypes.length > 0) {
            for (var i = 0; i < selFiletypes.length; i++) {
                if (selFiletypes[i] == fileend) {
                    isnext = true;
                    break;
                }
            }
        }
        if (!isnext) {
            swInfoAlt('选择的文件不正确');
            target.value = "";
            return false;
        }
    } else {
        return false;
    }

    if (!!target.files) {
        selFileSize = target.files[0].size;
        $('#selImageFileId').val(target.files[0].name);
    }

    //选择图片大小判断
    var size = selFileSize / 1024;
    if (size > selFilemaxsize) {
        swInfoAlt("ファイルサイズは" + selFilemaxsize / 1024 + "Mを超えることはできません。");
        target.value = "";
        return false;
    }
    
    //空白图片判断
    if (size <= 0) {
        swInfoAlt("不能追加空白文件");
        target.value = "";
        return false;
    }

    // 选择的图片显示
    var file = $('#ImageFiles').get(0).files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        $('#kaitoriImagePreview').get(0).src = e.target.result;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━
 * 上传按钮
 * ━━━━━━━━━━━━━━━━━━━━━━*/
function fileUpload() {
        var serialize = $('#gridInfoForm').serializeArray();
        var obj = {};
        $.each(serialize, function (index, field) {
            if (field.name == 'cunhtmlkongjian' && field.value != null && field.value != undefined) {
                obj[field.name] = getReplace(getEditorValue().replaceAll('"', '"').replaceAll('<', '<').replaceAll('>', '>').replaceAll("'", "′"));
            }
            else {
                obj[field.name] = getReplace(field.value);
            }
        });
        var Data = JSON.stringify(obj);
        var formData = new FormData();
        formData.append('ImageFiles', $('#ImageFiles')[0].files[0]);
        formData.append('id', id);
        formData.append('Data', Data);
        $.ajax(AppUrl('/ControllerName/UploadFile'), {
            processData: false,
            contentType: false,
            ifModified: true,
            cache: false,		//无缓存上传
            data: formData,
            method: 'POST',
            accepts: 'application/json',
            async: false,
            beforeSend: function (xmlHttp) {
                xmlHttp.setRequestHeader("If-Modified-Since", "0");
                xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            },
            success: function (d) {
                if (d.rtn == "OK") {
                    //window.location.reload(true);  //画面强制刷新 ctrl+F5
                }
            }
        });
}

cs

using System.Web;

namespace Controllers
{
    public class ControllerNameController
    {
        /// <summary>
        /// ajax调用
        /// </summary>
        /// <param name="ImageFiles">选择的文件信息</param>
        /// <param name="id">id</param>
        /// <param name="Data">from的信息</param>
        /// <returns>OK</returns>
        public async Task<JsonResult> UploadFile(HttpPostedFileBase ImageFiles,
                                                    string id,
                                                    string Data)
        {
            await Task.Run(() =>
            {
                return RunUploadFile(ImageFiles, id, Data);
            });
            var obj = new
            {
                rtn = "OK",
            };
            return Json(obj);
        }

        /// <summary>
        /// 文件上传 Run
        /// </summary>
        private JsonResult RunUploadFile(HttpPostedFileBase ImageFiles, string id, string Data)
        {
            huamianFromModel model = JsonUtil.Parse<huamianFromModel>(Data);
 
            if (ImageFiles != null)
            {
                bool uploadKubun = false;  //上传文件成功失败区分  true成功 false失败
                try
                {
                	//文件类型判断 图片类型
                    if (ImageFiles.ContentType.StartsWith("image/"))
                    {
                        string strPath = "~/App_Data/uploadPath/";   //文件上传到App_Data/uploadPath下的地址
                        // 文件夹不存在时创建文件夹
                        string FilePath = Server.MapPath(strPath);
                        DirectoryInfo di = new DirectoryInfo(FilePath);
                        if (!di.Exists) { di.Create(); }

                        // 上传文件地址作成
                        string upfile = FilePath + Path.GetFileName(ImageFiles.FileName);
                        // 文件大小判断
                        var size = ImageFiles.ContentLength / 1024;
                        var filemaxsize = 1024 * 2;
                        if (size > filemaxsize)
                        {
                            outMsg = new MsgModel(MsgTypes.WARNING, "文件大小" + filemaxsize / 1024 + "M不能超过。");
                        }
                        else
                        {
                            if (!Path.GetFileName(ImageFiles.FileName))
                            {
                                // 文件删除
                                FileInfo file = new FileInfo(FilePath + Path.GetFileName(ImageFiles.FileName));
                                file.Delete();
                            }
                            // 文件上传
                            ImageFiles.SaveAs(upfile);
                            uploadKubun = true;
                        }
                    }
                    else
                    {
                        // 如果不是图像文件则出错 
                         var obj = new
			{
				rtn = "NG",
			};
			return Json(obj);
                    }
                }
                catch (Exception ex)
                {
				    var obj = new
				    {
				        rtn = "NG",
				    };
				    return Json(obj);
                }
                // 文件上传失败
                if (!uploadKubun)
                {
                    return Json(outMsg);
                }
            }
            else
            {
	            var obj = new
	            {
	                rtn = "NG",
	            };
	            return Json(obj);
            }
            var obj = new
            {
                rtn = "OK",
            };
            return Json(obj);
        }

    }