本文目录
c#.net MVC 实例
我感觉你是否忽略了最精髓的和严谨的东西？
VS2010或者任意版本，新建MVC项目时，选择样板站
里面的代码绝对是精髓及严谨完整的
想架构一个PHP 应用MVC的系统的例子
官方出的zend framework是比较大型的 在官网有下国产的THINKPHP是轻量型MVC框架 适合入门用
mvc视图中怎么上传图片并显示
如果只是上传的话那太容易了，如果还要显示那就难了，因为要显示的话就不能只向服务器提交一次请求，必须异步提交。下面的例子是我亲自写的，异步提交上传图片并预览。全部代码都在。
首先建一个html文件，复制以下html文本。使用说明：
引用jquery两个js文件，网上自己搜吧，到处都有。
《script src="jquery-1.4.2.min.js" type="text/javascript"》《/script》
《script src="jquery.form.js" type="text/javascript"》《/script》
2.添加两个文本框，第一个ID必须是“bigImage1”，第二个必须是“smallbigImage1”。
《input type="text" name="url1" id="bigImage1" style="width:150px;" onclick="selectImage(this)" /》
《input type="hidden" name="smallUrl1" id="smallbigImage1" value="" /》
当点击第一个文本框时，弹出一个上传窗口，选择一张图片并点“上传”，上传成功后可预览图片。此过程会在服务器上把原图片生成一张缩略图，并把原图URL和缩略图URL一起以JSON格式返回到前台页面，临时显示缩略图。当点击“确定”时，它会把两个URL添加到两个对应ID的文本框。第二个框是隐藏的，给用户的感觉就像是只返回一个URL一样。
3.请自己写脚本 获得两个文本框的值，再进行你想做的操作。
4.id为"uploadDiv"的DIV是一个整体，不可分割。主要是提供一个文件类型的表单，用于异步上传。请修改action的URL为你上传的后台路径。
下面是HTML代码
《!DOCTYPE html》《html》《head》 《title》Index《/title》 《script src="jquery-1.4.2.min.js" type="text/javascript"》《/script》 《script src="jquery.form.js" type="text/javascript"》《/script》 《script type="text/javascript"》 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’; }); }); 《/script》《/head》《body》 《p》上传单个文件或图片《/p》《div》 《input type="text" name="url1" id="bigImage1" style="width:150px;" onclick="selectImage(this)" /》 《input type="hidden" name="smallUrl1" id="smallbigImage1" value="" /》 《/div》《div id="uploadDiv" style="width: 400px; height: 280px; border: 1px solid #9eb9f1; background-color: #e1eaea; text-align:left; display:none; z-index:999;"》 《div》 《div style="width: 376px; float: left; padding-left:4px; padding-top:4px; padding-bottom:4px; overflow:hidden;"》 《form id="fileForm" method="post" action="/Home/UploadImage" enctype="multipart/form-data" 》 《input type="file" id="upImage" name="upImage" style="padding-bottom: 1px; padding-left: 8px; padding-right: 8px; height: 24px; width:220px; padding-top: 1px;" /》 《input type="button" id="btnUpload" value="上传" style="padding-bottom: 1px; padding-left: 8px; padding-right: 8px; height: 24px; cursor: pointer; padding-top: 1px; line-height: 12px;" /》 《span id="uploading" style="color:#ff0000; display:none; font-size:14px; font-weight:bold;"》上传中......《/span》 《input type="button" id="btnSure" value="确定" style="padding-bottom: 1px; padding-left: 8px; padding-right: 8px; height: 24px; cursor: pointer; padding-top: 1px; line-height: 12px; display:none; background-color:#9fd0f9;" onclick="makeSure(this)" /》 《/form》 《/div》 《div style="width: 20px; height: 30px; float: right; "》 《div style="width: 20px; height: 20px; background-color:#9fc0f7; font-size:20px; text-align:center; line-height:16px; cursor:pointer;" onclick="closeDiv()"》X《/div》 《/div》 《/div》 《div style="width:398px; height:240px; text-align:center; overflow:hidden; "》 《img id="showImage" alt="预览图片" src="" style="width: 340px; display:none;" /》 《/div》《/div》《/body》《/html》
下面是后台代码
返回到前台页面的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(); } /// 《summary》 /// 上传图片 /// 《/summary》 /// 《returns》《/returns》 public ActionResult UploadImage() { //定义错误消息 JsonResult msg = new JsonResult(); try { //接受上传文件 HttpPostedFileBase postFile = Request.Files; 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; } /// 《summary》 由于回答超过最大限制，/// 生成缩略图 的代码请向我索取
mvc实现动态图片切换.net
我是先将图片信息放到了页面的某个隐藏域中，如：后台在Page_Load的时候先从数据库中取图片：protected void Page_Load(object sender, EventArgs e) { Hidden2.Value = ""; LoginBLL log = new LoginBLL(); DataSet ds = log.GetImage("1");//获取图片信息 if (ds != null && ds.Tables.Rows.Count 》 0) { for (int i = 0; i 《 ds.Tables.Rows.Count; i++) { Hidden1.Value += ds.Tables.ToString() + ","; } } }这是前台页面，由于隐藏域中已经有值，所以我将取出来的值用JS加CSS样式来实现的，能够达到每五秒钟切换一次图片，点击图片，可以浏览到大图。我将取出的图片用“，”进行连接，然后再通过JS拆分后分别赋值创建并赋给对象，以达到动态切换图片的效果。《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"》《html》《head》《title》《/title》《/head》《body》《input id="Hidden1" type="hidden" runat="server" /》《script type="text/javascript" language="javascript"》var widths=500; //焦点图片宽var w=2;var widthss=widths+w;var heights=221; //焦点图片高//var heightss=heightss+w;//var heightt=32; //总条数//img1=new Image();在这里是声明了一个图片元素的对象//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.//这个代码一般用于head区,用于预加载图片,即加快图片显示.//只有用new Images()得到的图片IE7才认,//而IE6和firefox可认得imgUrl="/y9q9ms7lbgbt.jpg";得到的图片var str=document.getElementById(’Hidden1’).value.split(’,’);if(str!=""){ for(var i=0;i《str.length-1;i++) {//获取图片的数量，并创建对象 eval(’img’+(i+1)+’=new Image();’); eval(’img’+(i+1)+’.src="’+str+’";’); eval(’url’+(i+1)+’=new Image();’); eval(’url’+(i+1)+’.src="’+str+’";’); }}var counts=str.length-1; var nn=1; //当前所显示的滚动图var key=0; //标识是否为第一次开始执行var tt; //标识作用function change_imgbaner(){if(key==0){key=1;} //如果第一次执行KEY=1，表示已经执行过一次了。else if(document.all)//document.all仅IE6/7认识，firefox不会执行此段内容{document.getElementById("pic").filters.Apply(); //将滤镜应用到对像上document.getElementById("pic").filters.Play(duration=1); //开始转换document.getElementById("pic").filters.SlideStyle=’SWAP’;//转换效果document.getElementById("pic").filters.Bands=1;// with(document.getElementById("pic").filters)// { Duration=2;SlideStyle=’SWAP’;Bands=1; }}eval(’document.getElementById("pic").src=img’+nn+’.src’); //替换图片eval(’document.getElementById("url").href=url’+nn+’.src’); //替换URL//eval(’document.getElementById("title").value=txt’+nn+’.txt’); //替换ALTfor (var i=1;i《=counts;i++){document.getElementById("xxjdjj"+i).className=’axx’; //将下面黑条上的所有链接变为未选中状态}document.getElementById("xxjdjj"+nn).className=’bxx’; //将当前页面的ID设置为选中状态nn++;if(nn》counts){nn=1;} //如果ID大于总图片数量。则从头开始循环tt=setTimeout(’change_imgbaner()’,5000); //在4秒后重新执行change_imgbaner()方法.}function changeimg(n)//点击黑条上的链接执行的方法。{nn=n; //当前页面的ID等于传入的N值,window.clearInterval(tt); //清除用于循环的TT//重新执行change_imgbaner();但change_imgbaner()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.tt=setTimeout(’change_imgbaner()’,500);//change_imgbaner();}function aHref(){return;}//样式表document.write(’《style》’);document.write(’.axx{padding:1px 7px;margin:0 5px;}’);document.write(’a.axx:link,a.axx:visited{text-decoration:none;color:#000;line-height:12px;font:12px sans-serif;background:#fff;border:1px solid #3467cc}’);document.write(’a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:12px sans-serif;background:#666;}’);document.write(’.bxx{padding:1px 7px;margin:0 5px;}’);document.write(’a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:14px sans-serif;background:#95bdeb;font-weight:900}’);document.write(’a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:14px sans-serif;background:#ff9900;font-weight:900}’);document.write(’《/style》’);//内容部分document.write(’《div style="width:’+widthss+’px;height:’+heights+’px;overflow:hidden;text-overflow:clip;float:left;"》’);document.write(’《div》《a id="url" target="_blank"》《img id="pic" style="border:0px #cbcbcb solid;FILTER: progid:DXImageTransform.Microsoft.Slide(duration=1,slidestyle=SWAP,Bands=1)" width=’+widths+’ height=’+heights+’ /》《/a》《/div》’);document.write(’《div style="background: transparent;width:98%;text-align:right;top:-30px;position:relative;margin:1px;height:32px;border:0px;padding-top:1px;z-index:0;"》《div》’);for(var i=1;i《counts+1;i++){document.write(’《a href="javascript:aHref();" id="xxjdjj’+i+’" class="axx" target="_self" onmouseover="javascript:changeimg(’+i+’);"》’+i+’《/a》’);}document.write(’《/div》《/div》《/div》’);//开始执行滚动操作change_imgbaner();--》《/script》《/body》《/html》 PS:MVC框架无非就是通过某个框架结构来获取需要的结果而已，你所要的效果与MVC框架并无直接关系，只是获取图片的集合需要通过MVC的架构关系来读取，通过视图层调用业务层的方法，业务层再通过数据访问层从数据库获取数据，再返回给业务逻辑层，进而再返回给视图层，最终还是由视图层来对返回的结果进行处理显示在页面上，而你需要的不就是视图层来显示图片切换的效果吗？我将从数据库取图片的步骤省略了，我用的也是三层架构，注意：LoginBLL log = new LoginBLL();DataSet ds = log.GetImage("1");//获取图片信息我的这一步就是获取图片信息，调用的是业务逻辑层的某个接口下的方法，因此接口名后面带有BLL，而在我的DataAccess类下，反射创建类的实例，将某些类的模块反射给接口，而真正与数据库交互的就是这些类，而后面的HTML代码则是对你图片进行切换的JS和CSS样式，通过它们来达到想要的效果，所以你所讲的效果与MVC架构并无太大关系。
