MVC图片的上传和下载（简单实现）

最新推荐文章于 2019-04-01 16:42:07 发布

刘颖90

最新推荐文章于 2019-04-01 16:42:07 发布

阅读量3k

点赞数 1

分类专栏：面向对象编程-C# 文章标签： mvc html javascript

本文链接：https://blog.csdn.net/tgbsqliuying/article/details/43152793

版权

面向对象编程-C# 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

问题性博客，就直接入主题

View中：

		<form method="post">
		                    <div id="fileError"></div>
		                    <div id="fileName"></div>
		                    <input type="file" class="easyui-linkbutton"  id="fileToUpload" οnchange="fileSelected();" />
		                    <img id="personimg" src="" style=" width:100px;" />
		
		                    <input type="button" id="btnupload" οnclick="uploadFile()" value="上传">
		                </form>

js代码：

$(document).ready(function () {

    $("#btnupload").hide();
  
    var fileName = null;

})

//选择上传文件---图片的上传预览只限单张。
function fileSelected() {
    //无论选取了多少张相片，只选取第一张
    var file = document.getElementById('fileToUpload').files[0];
    fileName = file.name;
    var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
    if (file_typename == '.jpg' || file_typename == '.gif' || file_typename == '.png' || file_typename == '.bmp') {//这里限定上传文件文件类型
        if (file) {

            var fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            if (fileSize > 2) {

                document.getElementById('fileError').innerHTML = "上传图片大小不应超过2M";
            }

            else {

                //图片满足条件
                document.getElementById('fileError').innerHTML = "";

                //可上传图片
                $("#btnupload").show();

            }
        }

    }
    else {//图片格式不符合规则

        $("#btnupload").hide();
        document.getElementById('fileError').innerHTML = "<span style='color:Red'>图片格式应为jpg,gif,png,bmp" + ",请重新选择图片</span>"

    }
}


function uploadFile() {

    //隐藏上传按钮
    $("#btnupload").hide();

    var fd = new FormData();
    fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

    //声明AJAX局部更新对象
    var xhr = null
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }


    xhr.open("POST", "/UpDownload/Upload", false);
    //服务已经相应完成
    xhr.send(fd);

    if (xhr.readyState == 4 && xhr.status == 200) {
        alert();

        $('#personimg').attr("src", "../../../" + fileName);
    }
}

controller代码：

public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        [ValidateInput(false)]
        public bool Upload(HttpPostedFileBase[] fileToUpload)
        {   
            
            string path = "";

            try
            {
                
                //TODDO:读取任何地方的路径
                foreach (HttpPostedFileBase file in fileToUpload)
                {
                    path = System.IO.Path.Combine(Server.MapPath("~/"), System.IO.Path.GetFileName(file.FileName));

                   //写入数据库
                   // UpLoadDB(path, file.FileName, id);

                    file.SaveAs(path);

                }

                return true;
            }
            catch
            {
                return false;
            }

        }

这样只是简单实现了图片的上传和预览，并没有写入数据库，也没有使用 MongoDB 。