使用mvc4中的plupload将图像保存到数据库中的同一视图中显示图像

本文介绍了使用mvc4中的plupload将图像保存到数据库中的同一视图中显示图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 下面是视图： i想要显示图像，因为它们被保存到数据库，没有得到如何去做。我已经拿了一个名为uploadedimages的div当我从控制器绑定数据但它没有被调用时。 @ { ViewBag.Title =ImageUpload ; // hardcoded patientid temporary TempData [PatientId] = 2; } < link href = @ Url.Content（ 〜/ Scripts / plupload / js / jquery.plupload.queue / css / jquery.plupload.queue.css） rel = stylesheet type = text / css / > < link href = @ Url.Content（ 〜/ Scripts / plupload / js / jquery.ui.plupload / css / jquery.ui.plupload.css） rel = 样式表 类型 = text / css / > < script src = @ Url.Content（ 〜/ Scripts /plupload/js/plupload.full.js\")\" type = text / javascript > < / script > < script src = @ Url.Content（ 〜/ Scripts / plupload / js / jquery.ui.plupload.js） type = text / javascript > < / script > < script src = @ Url.Content（ 〜/ Scripts / plupload / js / jquery.plupload.queue / jquery.plupload.queue.js） 类型 = text / javascript > < / script > < script type = text / javascript > $（document）.ready（function（）{ $（＃uploader）。pluploadQueue（{ //一般设置运行时： 'html5，html4，gears，flash，silverlight'， url：'@ Url.Action（ImageUpload）'， max_file_size：'10mb'， chunk_size：'1mb'， unique_names：true， button_browse_hover：true， multiple_queues：true， dragdrop：false， //如果我们可以$，请在客户端调整图片大小b $ b调整大小：{宽度：320，高度：340，质量：90}， //指定要浏览的过滤器的文件：[ {title：图像文件，扩展：jpg，gif，png，jpeg，bmp}， {标题：Zip文件，扩展名：zip}， {标题：'PDF文件'，扩展名：'pdf '}， {标题：Excel文件，扩展名：xls，xslx，csv}， ]， // Silverlight设置 silverlight_xap_url：'@ Url.Content（〜/ Scripts / plupload / plupload.silverlight.xap）'}）; //客户端表单验证 $（'form'）。submit（function（e）{ var uploader = $（'#uploader'） .pluploadQueue（）; //队列中的文件首先上传 if（uploader.files.length> 0）{ if（uploader.files.length < 9） { // 当 all files 已上传 提交 表格 uploader.bind（'StateChanged'， function （） { 如果 （uploader.files.length = == （uploader.total.uploaded + uploader.total.failed）） { $（' form'）[0] .submit（）; } }）; uploader.bind（'FileUploaded'， function （数据） { $（'＃uploadedImages'） .prepend（'< img id = theImg src = '+ data +' / > '）; }）; uploader.start（）; } else { alert（'超过8的文件数'）; } 返回false; } else { alert（'你必须排队至少一个文件。'）; } 返回false; }）; }）; < / script > @using（Html.BeginForm（ImageUpload，Image，FormMethod.Post，new {enctype =multipart / form-data}）） { < div id = 上传者 > < p > 您的浏览器没有Flash，Silverlight，Gears，BrowserPlus或HTML5支持。< / p > < / div > < div id = uploadedImages > < / div > } 以下是控制器： [HttpPost] public string ImageUpload（HttpPostedFileBase uploadFile） { var bytes = new byte [ 0 ]; int patientId =（ int ）TempData [ PatientId]; TempData.Keep（）; string UploadedImage = string .Empty; PatientChartImage oPatientChartImage = new PatientChartImage（）; uploadFile = Request.Files [ 0 ]; if （uploadFile.ContentLength > 0 ） { bytes = new byte [uploadFile.ContentLength]; var fileName = Path.GetFileName（uploadFile.FileName）; var path = Path.Combine（Server.MapPath（ 〜/ TempFolder），fileName）; oPatientChartImage.PatientId = patientId; oPatientChartImage.PracticeId =（用户 as CustomPrincipal）.CustomIdentity.PracticeId; oPatientChartImage.Title = fileName; oPatientChartImage.UserId =（用户 as CustomPrincipal）.CustomIdentity.UserId; oPatientChartImage.SerialNumber = 2 ; Bitmap original = Bitmap.FromStream（uploadFile.InputStream） as 位图; 使用（System.IO.MemoryStream stream = new System.IO。 MemoryStream（）） { original.Save（stream，System.Drawing.Imaging.ImageFormat.Png）; oPatientChartImage.Image = stream.ToArray（）; UploadedImage = ViewBag.ImageData = data：image / png; base64， +转换.ToBase64String（stream.ToArray（））; } db.PatientChartImages.Add（oPatientChartImage）; db.SaveChanges（）; } // 返回Json（new {ImageData = UploadedImage}，JsonRequestBehavior .AllowGet）; return UploadedImage; } 解决方案 （document）.ready（function（）{ （#uploader）。pluploadQueue（{ //常规设置运行时：'html5，html4，齿轮，flash，silverlight'， url：'@ Url.Action（ImageUpload ）'， max_file_size：'10mb'， chunk_size：'1mb'， unique_names：true， button_browse_hover：true， multiple_queues：true， dragdrop：false， //如果调整大小，请在客户端调整图像大小：{width：320，height：340，quality：90}， //指定要浏览过滤器的文件：[ {title：图像文件，扩展名：jpg，gif，png，jpeg，bmp}， {title： Zip文件，扩展名：zip}， {标题：'PDF文件'，扩展名：'pdf'}， {标题：Excel文件，扩展名：xls，xslx，csv}， ]， // Silverlight设置 silverlight_xap_url：'@ Url.Content（〜/ Scripts / plupload / plupload.silverlight.xap）'}）; //客户端表单验证 （'form'）。submit（function（e）{ var uploader = below is the view :i want to display images as they are saved to database , not getting how to go about it.i have took one div named uploadedimages when i bind the data from controller but it is not getting called.@{ ViewBag.Title = "ImageUpload"; //hardcoded patientid temporary TempData["PatientId"] = 2; }<link href="@Url.Content("~/Scripts/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css")" rel="stylesheet" type="text/css" /><link href="@Url.Content("~/Scripts/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/plupload/js/plupload.full.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/plupload/js/jquery.ui.plupload.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js")" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function () { $("#uploader").pluploadQueue({ // General settings runtimes: 'html5,html4,gears,flash,silverlight', url: '@Url.Action("ImageUpload")', max_file_size: '10mb', chunk_size: '1mb', unique_names: true, button_browse_hover: true, multiple_queues: true, dragdrop: false, // Resize images on clientside if we can resize: { width: 320, height: 340, quality: 90 }, // Specify what files to browse for filters: [ { title: "Image files", extensions: "jpg,gif,png,jpeg,bmp" }, { title: "Zip files", extensions: "zip" }, { title: 'PDF files', extensions: 'pdf' }, { title: "Excel Files", extensions: "xls,xslx,csv" }, ], // Silverlight settings silverlight_xap_url: '@Url.Content("~/Scripts/plupload/plupload.silverlight.xap")' }); // Client side form validation $('form').submit(function (e) { var uploader = $('#uploader').pluploadQueue(); // Files in queue upload them first if (uploader.files.length > 0) { if (uploader.files.length < 9) { // When all files are uploaded submit form uploader.bind('StateChanged', function () { if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) { $('form')[0].submit(); } }); uploader.bind('FileUploaded', function (data) { $('#uploadedImages').prepend('<img id="theImg" src="' + data + '" />'); }); uploader.start(); } else { alert('Number of files more than 8.'); } return false; } else { alert('You must queue at least one file.'); } return false; }); }); </script>@using (Html.BeginForm("ImageUpload", "Image", FormMethod.Post, new { enctype = "multipart/form-data" })){ <div id="uploader"> <p> You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p> </div> <div id="uploadedImages"></div>}below is the controller: [HttpPost] public string ImageUpload(HttpPostedFileBase uploadFile) { var bytes = new byte[0]; int patientId = (int)TempData["PatientId"]; TempData.Keep(); string UploadedImage = string.Empty; PatientChartImage oPatientChartImage = new PatientChartImage(); uploadFile = Request.Files[0]; if (uploadFile.ContentLength > 0) { bytes = new byte[uploadFile.ContentLength]; var fileName = Path.GetFileName(uploadFile.FileName); var path = Path.Combine(Server.MapPath("~/TempFolder"), fileName); oPatientChartImage.PatientId = patientId; oPatientChartImage.PracticeId = (User as CustomPrincipal).CustomIdentity.PracticeId; oPatientChartImage.Title = fileName; oPatientChartImage.UserId = (User as CustomPrincipal).CustomIdentity.UserId; oPatientChartImage.SerialNumber = 2; Bitmap original = Bitmap.FromStream(uploadFile.InputStream) as Bitmap; using (System.IO.MemoryStream stream = new System.IO.MemoryStream()) { original.Save(stream, System.Drawing.Imaging.ImageFormat.Png); oPatientChartImage.Image= stream.ToArray(); UploadedImage = ViewBag.ImageData = "data:image/png;base64," + Convert.ToBase64String(stream.ToArray()); } db.PatientChartImages.Add(oPatientChartImage); db.SaveChanges(); } //return Json(new { ImageData = UploadedImage },JsonRequestBehavior.AllowGet); return UploadedImage; } 解决方案 (document).ready(function () {("#uploader").pluploadQueue({ // General settings runtimes: 'html5,html4,gears,flash,silverlight', url: '@Url.Action("ImageUpload")', max_file_size: '10mb', chunk_size: '1mb', unique_names: true, button_browse_hover: true, multiple_queues: true, dragdrop: false, // Resize images on clientside if we can resize: { width: 320, height: 340, quality: 90 }, // Specify what files to browse for filters: [ { title: "Image files", extensions: "jpg,gif,png,jpeg,bmp" }, { title: "Zip files", extensions: "zip" }, { title: 'PDF files', extensions: 'pdf' }, { title: "Excel Files", extensions: "xls,xslx,csv" }, ], // Silverlight settings silverlight_xap_url: '@Url.Content("~/Scripts/plupload/plupload.silverlight.xap")' }); // Client side form validation('form').submit(function (e) { var uploader = 这篇关于使用mvc4中的plupload将图像保存到数据库中的同一视图中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！