mvc视图中怎么上传图片并显示

2024-12-16 09:01:39

推荐回答（5个）

回答1：

如果只是上传的话那太容易了，如果还要显示那就难了，因为要显示的话就不能只向服务器提交一次请求，必须异步提交。下面的例子是我亲自写的，异步提交上传图片并预览。全部代码都在。

首先建一个html文件，复制以下html文本。使用说明：

引用jquery两个js文件，网上自己搜吧，到处都有。

2.添加两个文本框，第一个ID必须是“bigImage1”，第二个必须是“smallbigImage1”。

当点击第一个文本框时，弹出一个上传窗口，选择一张图片并点“上传”，上传成功后可预览图片。此过程会在服务器上把原图片生成一张缩略图，并把原图URL和缩略图URL一起以JSON格式返回到前台页面，临时显示缩略图。当点击“确定”时，它会把两个URL添加到两个对应ID的文本框。第二个框是隐藏的，给用户的感觉就像是只返回一个URL一样。

3.请自己写脚本[document.getElementById("bigImage1").value] 获得两个文本框的值，再进行你想做的操作。

4.id为"uploadDiv"的DIV是一个整体，不可分割。主要是提供一个文件类型的表单，用于异步上传。请修改action的URL为你上传的后台路径。

下面是HTML代码




    Index
    
    
    
        function selectImage(obj) {
            var inputId = obj.id;
            document.getElementById('btnSure').setAttribute('inputId', inputId);
            var x = window.event.x;
            var y = window.event.y;
            var uploadDiv = document.getElementById('uploadDiv');
            uploadDiv.style.left = x + 10 + 'px';
            uploadDiv.style.top = y + 10 + 'px';
            uploadDiv.style.position = 'fixed';
            uploadDiv.style.display = 'inline';
        }
        function closeDiv() {
            document.getElementById('btnSure').style.display = 'none';
            document.getElementById('showImage').style.display = 'none';
            document.getElementById('uploadDiv').style.display = 'none';
        }
        function makeSure(obj) {
            var inputId = obj.getAttribute('inputId');
            document.getElementById(inputId).value = document.getElementById('showImage').getAttribute('big');
            document.getElementById('small' + inputId).value = document.getElementById('showImage').getAttribute('small');
            document.getElementById('image' + inputId).src = document.getElementById('showImage').getAttribute('small');
            document.getElementById("btnSure").style.display = 'none';
            document.getElementById('showImage').style.display = 'none';
            document.getElementById('uploadDiv').style.display = 'none';
        }
        $(function () {
            //异步上传图片
            $('#btnUpload').click(function () {
                if ($('#upImage').val() == '') {
                    alert('请选择一张图片文件');
                    return;
                }
                $('#fileForm').ajaxSubmit({
                    success: function (msg) {
                        var strJSON = msg; //得到的JSON
                        var image = eval("(" + strJSON + ")"); //转换后的JSON对象
                        document.getElementById('uploading').style.display = 'none';
                        $('#showImage').css('display', 'inline');
                        $('#showImage').attr('src', image.big);
                        $('#showImage').attr('big', image.big);
                        $('#showImage').attr('small', image.small);
                        $('#btnSure').css('display', 'inline');
                    }
                });
                document.getElementById('uploading').style.display = 'block';
            });
        });
    



    
上传单个文件或图片



    
     


    background-color: #e1eaea; text-align:left; display:none; z-index:999;">
    
        
            
                                    padding-right: 8px; height: 24px; width:220px; padding-top: 1px;" />
                                    height: 24px; cursor: pointer; padding-top: 1px; line-height: 12px;" />
                上传中......
                                height: 24px; cursor: pointer; padding-top: 1px; line-height: 12px; display:none; background-color:#9fd0f9;" onclick="makeSure(this)" />
            
        

        
            X

下面是后台代码

返回到前台页面的JSON格式对象是以类的对象。
    public class ReturnImage
    {
        public string big { get; set; }
        public string small { get; set; }
        public string isSuccessfull { get; set; }
        public string message { get; set; }
    }

对于上传和生成缩略图，请自行完成，以下是ASP.NET MVC的例子。
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
        /// 
        /// 上传图片
        /// 

        /// 
        public ActionResult UploadImage()
        {
            //定义错误消息
            JsonResult msg = new JsonResult();
            try
            {
                //接受上传文件
                HttpPostedFileBase postFile = Request.Files["upImage"];
                if (postFile != null)
                {
                    DateTime time = DateTime.Now;
                    //获取上传目录 转换为物理路径
                    string uploadPath = Server.MapPath("~/UploadFiles/" + time.Year + "/" + time.ToString("yyyyMMdd") + "/");
                    //文件名
                    string fileName = time.ToString("yyyyMMddHHmmssfff");
                    //后缀名称
                    string filetrype = System.IO.Path.GetExtension(postFile.FileName);
                    //获取文件大小
                    long contentLength = postFile.ContentLength;
                    //文件不能大于2M
                    if (contentLength <= 1024 * 2048)
                    {
                        //如果不存在path目录
                        if (!Directory.Exists(uploadPath))
                        {
                            //那么就创建它
                            Directory.CreateDirectory(uploadPath);
                        }
                        //保存文件的物理路径
                        string saveFile = uploadPath + fileName + "_big" + filetrype;
                        try
                        {
                            //保存文件
                            postFile.SaveAs(saveFile);
                            //保存缩略图的物理路径
                            string small = uploadPath + fileName + "_small" + filetrype;
                            MakeThumbnail(saveFile, small, 320, 240, "W");
                            ReturnImage image = new ReturnImage();
                            image.big = "/UploadFiles/" + time.Year + "/" + time.ToString("yyyyMMdd") + "/" + fileName + "_big" + filetrype;
                            image.small = "/UploadFiles/" + time.Year + "/" + time.ToString("yyyyMMdd") + "/" + fileName + "_small" + filetrype;
                            msg = Json(image);
                        }
                        catch
                        {
                            msg = Json("上传失败");
                        }
                    }
                    else
                    {
                        msg = Json("文件大小超过限制要求");
                    }
                }
                else
                {
                    msg = Json("请选择文件");
                }
            }
            catch (Exception e)
            {
                ;
            }
            msg.ContentType = "text/html";
            return msg;
        }
        /// 
        
        由于回答超过最大限制，/// 生成缩略图 的代码请向我索取