mvc 上传图片及预览

最新推荐文章于 2022-09-13 19:41:29 发布

小发发吖

最新推荐文章于 2022-09-13 19:41:29 发布

阅读量909

点赞数 2

分类专栏： MVC4.0

本文链接：https://blog.csdn.net/qq_36702996/article/details/76048028

版权

MVC4.0 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

@model ShoeManage.Model.Order

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/UiLibs/easyui/jquery.min.js"></script>
    <script src="~/UiLibs/easyui/jquery.easyui.min.js"></script>
    <script src="~/UiLibs/easyui/locale/easyui-lang-zh_CN.js"></script>
   
    <script type="text/javascript">
        $(function () {
            $("#img").on("change", function () {
                var file = this.files[0];
                if (this.files && file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#imgshow").attr("src", e.target.result);
                    }
                    reader.readAsDataURL(file);
                }
            })
            function tijiao() {
                $("#tj").click(function () {
                    $("#myform").form("submit", {
                        url: "@Url.Action("AddImage")",
                    success: function (data) {
                        alert(data);
                    }
                })
            })
        };
        })
       

      

    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm("UpLoad", "ImageUpload", FormMethod.Post, new { enctype = "multipart/form-data", id = "myform" }))
        {
             <input type="file"  value="选择图片" name="img" id="img"/>
            <br />
            <input type="button" value="提交" id="tj" οnclick="tijiao()"/ >
            <fieldset>
            <legend>预览</legend>
            <img id="imgshow" style="width:100px ;height:200px" src="" alt=""/>
        </fieldset>
        }
        
    </div>
</body>
</html>

//后台接收

  public ActionResult AddImage()
        {
            HttpFileCollectionBase files = Request.Files;

            HttpPostedFileBase file = files["img"];
            string extName = Path.GetExtension(file.FileName).ToLower();
            string path = Server.MapPath("~/Img/");
            string fileName = Guid.NewGuid().ToString();

            file.SaveAs(path + fileName + extName);
            return Content("成功");
        }

小发发吖

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
mvc 上传图片及预览

@model ShoeManage.Model.Order@{ Layout = null;}@using (Html.BeginForm("UpLoad", "ImageUpload", FormMethod.Post, new { enctype = "multipart/form-data", id = "myform" })) { 预览 }
复制链接

扫一扫

专栏目录