点击按钮，自动浏览文件，选好文件之后自动上传

上传功能在前端应用中经常用到，现在网上很多上传的插件，在之前的博文中介绍一个 fileinput插件，下面就使用简单的input实现文件上传

先看效果：

 前台代码：

<h2>使用input标签上传</h2>
<div>
    <input type="file"  style="display:none" onchange="Upload()" id="FileUpload"/><input  type="button" value="浏览文件选择文件自动提交" onclick=" OpenFile()" class="btn btn-info"/>
</div>
<script>
    function OpenFile() {
        $("input[type='file' ]").click();
    }
    function Upload() {
        var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
            alert("请选择文件")
            return;
        }
        var files = $("#FileUpload").val();
        var ex = files.substring(files.indexOf('.'), files.length).toUpperCase();
        if (ex== ".JPG" || ex== ".PNG"||ex == ".GIF") {
            var formFile = new FormData();
            formFile.append("action", "UploadVMKImagePath");
            formFile.append("file", fileObj); //加入文件对象
            var data = formFile;
            $.ajax({
                url: "/Test/Upload",
                data: data,
                type: "Post",
                dataType: "json",
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                success: function (result) {
                    if (result.Return) {
                        alert("上传成功")
                    } else {
                        alert(result.Message)
                    }
                }, error: function (ex) {
                    console.warn(ex)
                }
            })
        } else {
            alert("文件格式不符")        
        }
    }
</script>

后台代码

 public JsonResult Upload()
        {
            string directoryPath = Server.MapPath("../Content/ModelFolder");
            string Img = Server.MapPath("../Content/Img");
            if (!Directory.Exists(directoryPath))
                Directory.CreateDirectory(directoryPath);
            try
            {
                foreach (string f in Request.Files)
                {
                    HttpPostedFileBase file = Request.Files[f];
                    if (file != null && file.ContentLength > 0)
                    {
                        string fileName = file.FileName;
                        string filePath = Path.Combine(directoryPath, fileName);
                        file.SaveAs(filePath);//保存上传的文件
                    }
                }
                return Json(new { Return = true });
            }
            catch (Exception ex)
            {
                return Json(new { Return = false, Message = ex.Message });
            }
        }