首页 > 代码库 > 在VS2013 MVC项目中上传图片

在VS2013 MVC项目中上传图片

之前做网站项目时,凡遇到保存图片的,我都将图片上传后存储在服务器的本地文件夹中,在一个ControllerAction中,类似操作如下所示:

public ActionResult UpLoad(HttpPostedFileBasearImg)
{ 
           //保存图片
           if (arImg != null)
           {
                string uploadName =arImg.FileName;//获取待上传图片的完整路径,包括文件名
                string suffix =uploadName.Substring(uploadName.LastIndexOf("."));//获得上传的图片的后缀名
                string newName =DateTime.Now.ToString("yyyyMMddHHmmss") + suffix;
                try
                {
                   arImg.SaveAs(Server.MapPath("~/Images/Article/") + newName); 
                }
                catch (System.Exception ex)
                {
                   System.Diagnostics.Trace.WriteLine(ex.Message);
                }
           }
           return View(“Images”);
}


现在,我想将图片存储到MySql数据库中,并想尝试使用MVCAjax功能,所以写了如下图所示的测试程序。其中红色框中的内容是部分视图,因为我想使用Ajax上传图片,然后动态更新红色框部分。

wKiom1OqhU7glBEnAAFzTkRVGnk631.jpg

首先,新建一个MVC Internet项目,在HomeController中添加Images方法,用于返回上图所示的图片列表。代码如下:

publicActionResult Images()
{
return View();
}

添加Images视图页面,如下:

wKiom1OqhXqygH-HAACm5whAVOo214.jpg

为了便于部分更新,在HomeController中添加Action返回_ImageList分部视图,如下:

publicPartialViewResult _ImageList()
{
IList<Int32> imgList =GetImageList();
returnPartialView(imgList);
}


这个子Action获取所有的图片的ID列表,并传入视图中。GetImageList()是一个私有方法,功能是从数据库中读取所有图片的ID。代码如下:

privateIList<int> GetImageList()
    {
            IList<Int32> imgList = newList<Int32>();
            MySqlConnection sqlCon = null;
            try
            {
                sqlCon = newMySqlConnection("server=127.0.0.1;uid=root;pwd=test;database=test;CharSet=utf8");
                sqlCon.Open();
 
                MySqlCommand sqlCmd = newMySqlCommand("SELECT ID FROMImages",sqlCon);
                MySqlDataReader dr =sqlCmd.ExecuteReader();
 
               while (dr.Read())
                {
                   imgList.Add(dr.GetInt32(0));
                }
 
                dr.Close();
            }
            catch (Exception ex)
            {
                System.Diagnostics.Trace.WriteLine("Image error:" +ex.Message);
            }
            finally
            {
                if (sqlCon != null)
                {
                    sqlCon.Close();
                }
                sqlCon = null;
            }
 
            return imgList;
}

添加_ImageList分部视图如下,用于循环显示所有图片。

wKiom1OqhfrxcSssAAGRcLFpDD8786.jpg    接下来,需要实现UpLoad方法,用于保存客户端上传的图片。

[HttpPost]
        publicActionResult Upload(HttpPostedFileBase image)
        {
            if (image != null)
            {
                MySqlConnection sqlCon = null;
                try
                {
                    sqlCon = newMySqlConnection("server=127.0.0.1;uid=root;pwd=test;database=test;CharSet=utf8");
                    sqlCon.Open();
 
                    string sql = "INSERT INTOImages (Content, Type, Length) VALUES (@Content, @Type, @Length)";
 
                    byte[] data = newbyte[image.InputStream.Length];
                   image.InputStream.Read(data, 0, Convert.ToInt32(image.InputStream.Length));
 
                    MySqlCommand sqlCmd = newMySqlCommand(sql, sqlCon);
                    sqlCmd.Parameters.AddWithValue("Content", data);
                   sqlCmd.Parameters.AddWithValue("Type", image.ContentType);
                   sqlCmd.Parameters.AddWithValue("Length",image.ContentLength);
                    sqlCmd.ExecuteNonQuery();
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Trace.WriteLine("Upload imageerror: " +ex.Message);
                }
                finally
                {
                    if (sqlCon != null)
                    {
                        sqlCon.Close();
                    }
                    sqlCon = null;
                }
            }
 
            return View("Images");
}

另外,还需要实现一个方法,根据ID获取相应的图片内容,如下:

publicFileResult Image(int id)
        {
            FileResult fileRet = null;
            MySqlConnection sqlCon = null;
            try
            {
                sqlCon = newMySqlConnection("server=127.0.0.1;uid=root;pwd=FarStone1!;database=test;CharSet=utf8");
                sqlCon.Open();
 
                MySqlCommand sqlCmd = newMySqlCommand("SELECTContent, Type, Length FROM Images WHERE ID=" + id.ToString(),sqlCon);
                MySqlDataReader dr =sqlCmd.ExecuteReader();
 
                if (dr.Read())
                {
                    int length =dr.GetInt32(2);
                    byte[] data = newbyte[length];
                    dr.GetBytes(0, 0, data, 0,length);
                    fileRet = newFileContentResult(data,dr.GetString(1));
                }
            }
            catch (Exception ex)
            {
                System.Diagnostics.Trace.WriteLine("Image error:" +ex.Message);
            }
            finally
            {
                if (sqlCon != null)
                {
                    sqlCon.Close();
                }
                sqlCon = null;
            }
 
            return fileRet;
    }

完成以上操作后,就可以编译运行MVC项目了,通过IE调试可以看到下图的效果,且可以上传文件。

 wKiom1OqhmrQnxhzAAGI4PlVvqI289.jpg

但是,需要注意的是,我在上传时并没有用到Ajax相关的东西。第一步,需要修改上传代码,如下:

wKiom1OqhrnheGnNAAJX1xXIrjg733.jpg

然后,需要修改HomeController中的UpLoad方法的,返回PartialView,如下:

IList<Int32> imgList =GetImageList();
return PartialView("_ImageList", imgList);

    编译并运行程序,并没有出现理想中的部分更新,而是重新跳转到了新的页面,如下图所示:

wKioL1OqhsugLa9SAAGIb5GQpjM369.jpg

也就是说Ajax的上传没有效果,通过查看资料发现,需要在项目中包含Ajax相关的Javascript文件,但是VS2013在项目的Script文件夹下并没有默认添加相关的Javascript文件,所以需要手动添加。这里通过右键项目名称,通过“管理NuGet程序包”并在联机项目中搜索“jQuery Unobtrusive Ajax”并安装相关的程序包,这时Script文件夹下将出现两个Ajax文件,如下图所示:

wKiom1OqhzLROgMzAAEz87Ggd-g459.jpg

编辑App_Start文件夹中的BundleConfig文件,加入如下代码:

bundles.Add(newScriptBundle("~/bundles/ajax").Include(
                        "~/Scripts/jquery.unobtrusive-ajax.min.js"));


然后在_Layout.cshtml文件中加入如下代码引用Ajax相关的Javascript文件:

@
Scripts
.Render(
"~/bundles/ajax"
)


当然,也可以使用<script></script>直接引用相关的Javascript文件。

    这时再次编译运行项目,并选择文件上传,发现界面始终停留在如下界面:

wKioL1Oqh0ugQIbXAAEpSh5GBAA465.jpg

为了确认点击“Upload”按钮时确实发生了上传动作,在HomeControllerUpLoad方法中设置了断点,并上传文件,如下所示:

wKiom1Oqh77xvoOhAAFpuVHSotc222.jpg

发现无论上传什么文件,在Controller中接收到的image都是空的。为了确认是否与上传文件有关,修改_ImageList分部视图如下:

wKiom1Oqh-mhDLxIAAHPCmnhc50970.jpg

并在HomeController中新增UploadText方法,如下:

publicActionResult UploadText(string image)
        {
            return Content("<divid=‘result‘>" +image + "</div>");
    }

    编译运行程序,可以看见在文本框中输入的任何字符串都可以动态更新在界面上,且是通过Ajax上传,并没有更新整个页面。

wKioL1OqiDGyIX5KAAJHLWYPzPw648.jpg

在网上查阅资料发现,MVC提供的Ajax.BeginForm无法上传文件,所以如果需要在MVC项目中上传图片,还是要使用Html.BeginForm

本文出自 “Jsl_mes” 博客,请务必保留此出处http://jslmes.blog.51cto.com/5008224/1430792