使用mvc4中的plupload将图像保存到数据库中的同一视图中显示图像 [英] Display images in same view as they are getting saved to database using plupload in mvc4

问题描述

下面是视图：



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） < span class =code-attribute> 
   
    < span class =code-attribute>       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）    {  
   
                      < span class =code-attribute>                     //    当    all     files        已上传   提交   表格  
   
                < span class =code-attribute>                           uploader.bind（'StateChanged'，    function    （）   < span class =code-attribute> {  
   
                                                  如果   （uploader.files.length     =   ==  （uploader.total.uploaded     +     uploader.total.failed））    {  
   
   
   
                        < span class =code-attribute>                                   $（' form'）[0] .submit（）;   
   
   
   
                        < span class =code-attribute>                          }   
   
                                          }）;   
   
                                           uploader.bind（'FileUploaded'，    function    （数据）    {  
   
   
   
            < span class =code-attribute>                                       $（'＃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  < span class =code-keyword>>  
您的浏览器没有Flash，Silverlight，Gears，BrowserPlus或HTML5支持。<   / p  >  
 <   / div  >  
 <   div  < span class =code-attribute>   id   =  uploadedImages >  
 
 <   / div  >  
 
 
} 

以下是控制器：

 [HttpPost] 
  public   string  ImageUpload（HttpPostedFileBase uploadFile）
 {
  var  bytes = < span class =code-keyword> 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将图像保存到数据库中的同一视图中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！