如果只是上传的话那太容易了，如果还要显示那就难了，因为要显示的话就不能只向服务器提交一次请求，必须异步提交。下面的例子是我亲自写的，异步提交上传并预览。全部代码都在。
首先建一个html文件，复制以下html文本。使用说明：
引用jquery两个js文件，网上自己搜吧，到处都有。
<script src="jquery-142minjs" type="text/javascript"></script>
<script src="jqueryformjs" 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="" />
当点击第一个文本框时，d出一个上传窗口，选择一张并点“上传”，上传成功后可预览。此过程会在服务器上把原生成一张缩略图，并把原图URL和缩略图URL一起以JSON格式返回到前台页面，临时显示缩略图。当点击“确定”时，它会把两个URL添加到两个对应ID的文本框。第二个框是隐藏的，给用户的感觉就像是只返回一个URL一样。
3请自己写脚本[documentgetElementById("bigImage1")value] 获得两个文本框的值，再进行你想做的 *** 作。
4id为"uploadDiv"的DIV是一个整体，不可分割。主要是提供一个文件类型的表单，用于异步上传。请修改action的URL为你上传的后台路径。
下面是HTML代码
<!DOCTYPE html><html>
<head>
<title>Index</title>
<script src="jquery-142minjs" type="text/javascript"></script>
<script src="jqueryformjs" type="text/javascript"></script>
<script type="text/javascript">
function selectImage(obj) {
var inputId = objid;
documentgetElementById('btnSure')setAttribute('inputId', inputId);
var x = windoweventx;
var y = windoweventy;
var uploadDiv = documentgetElementById('uploadDiv');
uploadDivstyleleft = x + 10 + 'px';
uploadDivstyletop = y + 10 + 'px';
uploadDivstyleposition = 'fixed';
uploadDivstyledisplay = 'inline';
}
function closeDiv() {
documentgetElementById('btnSure')styledisplay = 'none';
documentgetElementById('showImage')styledisplay = 'none';
documentgetElementById('uploadDiv')styledisplay = 'none';
}
function makeSure(obj) {
var inputId = objgetAttribute('inputId');
documentgetElementById(inputId)value = documentgetElementById('showImage')getAttribute('big');
documentgetElementById('small' + inputId)value = documentgetElementById('showImage')getAttribute('small');
documentgetElementById('image' + inputId)src = documentgetElementById('showImage')getAttribute('small');
documentgetElementById("btnSure")styledisplay = 'none';
documentgetElementById('showImage')styledisplay = 'none';
documentgetElementById('uploadDiv')styledisplay = 'none';
}
$(function () {
//异步上传
$('#btnUpload')click(function () {
if ($('#upImage')val() == '') {
alert('请选择一张文件');
return;
}
$('#fileForm')ajaxSubmit({
success: function (msg) {
var strJSON = msg; //得到的JSON
var image = eval("(" + strJSON + ")"); //转换后的JSON对象
documentgetElementById('uploading')styledisplay = 'none';
$('#showImage')css('display', 'inline');
$('#showImage')attr('src', imagebig);
$('#showImage')attr('big', imagebig);
$('#showImage')attr('small', imagesmall);
$('#btnSure')css('display', 'inline');
}
});
documentgetElementById('uploading')styledisplay = '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; }
}
对于上传和生成缩略图，请自行完成，以下是ASPNET MVC的例子。
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
/// <summary>
/// 上传
/// </summary>
/// <returns></returns>
public ActionResult UploadImage()
{
//定义错误消息
JsonResult msg = new JsonResult();
try
{
//接受上传文件
>
控制器内在返回视图前要加代码，把startTime和endTime用ViewData或者ViewBag方式发送给页面。ViewBagstartTime = startTime; ViewBagendTime = endTime;
页面将该参数的值填写到input标签的value内，大概如下（纯手写可能代码细节有误）：
<input name="start" value="@(string)ViewBagstartTime" />
这样无论是第一次访问页面还是之后查询，有值就会显示。
开始时间和结束时间的input标签，id一样了，虽然目前影响不大，但这习惯不好，必须改。
后台返回这些数据（添加@ResponseBody注解）
然后页面上可以使用spEL显示
也可以使用ajax访问
然后通过js或者jQuery
局部更新这几个位置
插入相应的数据
Spring数据库显示到前端
可以通过流的方式读取照片，得到照片的文件输出流 通过springMvc中的response获取输出流 设置页面contentType格式为octec-stream方式，就像下载文件一样 *** 作，还可以通过base64码显示到前端页面
以上就是关于mvc视图中怎么上传图片并显示全部的内容，包括:mvc视图中怎么上传图片并显示、spring mvc 如何上传很多图片路径保存在数据库表的某个字段里面 帮帮我、C# mvc在HTML页面中按条件搜索数据库中内容 怎么样才能使搜索后的页面中包含搜索内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）