آپلود یا گرفتن عکس با دروبین در MVC

در این مقاله، نشان می دهیم که چگونه می توان یک عکس را حتی اگر در کامپیوتر شخصی شما وجود نداشت، آپلود نماییم. بنابراین عکس را از دوربین گرفته و در دیتابیس ذخیره می کنیم.

مرحله اول: دیتابیس و جدول های موردنیاز خود را می سازیم.

مرحله دوم: ویژوال استودیو را باز کرده و پروژه ای در آن ایجاد می کنیم.

مرحله سوم: یک کلاس مدل Entity Data می سازیم.

مرحله چهارم: controller و یک View ساخته و کد زیر را در آن قرار می دهیم.

<link href="~/Content/bootstrap-fileupload.css" rel="stylesheet" />  
<link href="~/Content/Photobooth.css" rel="stylesheet" />  
<script src="~/Scripts/bootstrap-fileupload.js"></script>  
<script src="~/Scripts/photowebcam.js"></script>  
<style type="text/css">  
    #example  
    {  
        height:300px;  
    }  
</style>  
<div class="pageheader">  
    <div class="media">  
        <div class="pageicon pull-left">  
            <i class="glyphicon glyphicon-cog"></i>  
        </div>  
        <div class="media-body">  
            <ul class="breadcrumb">  
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>  
                <li>Employee</li>  
            </ul>  
            <h4 id="lblSellertitle">Add Employee</h4>  
        </div>  
    </div><!-- media -->  
</div>  
<div class="contentpanel">  
    <form method="post" enctype="multipart/form-data" id="AddEmployeeForm">  
  
        <div class="col-md-12 form_align">  
            <div class="form-group last">  
                        <label class="control-label col-md-4" id="lblAvtar" style="text-align: start">Profile Picture</label>  
                        <div class="col-md-8">  
                            <div class="fileupload fileupload-new" data-provides="fileupload">  
                                <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">  
  
                                    <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" id="imgcamera">  
                                </div>  
                                <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>  
                                <div>  
                                    <span class="btn btn-white btn-file">  
                                        <span class="fileupload-new"><i class="fa fa-paper-clip"></i>Select image</span>  
                                        <span class="fileupload-exists"><i class="fa fa-undo"></i>Change</span>  
                                        <input type="file" name="file" class="default" id="txtAvtar" />  
                                    </span>  
                                    <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i>Remove</a>  
                                </div>  
                            </div>  
                               <button type="button" class="btn btn-primary btn-sm" id="btnbtncameraupload" style="width:150px;">Upload from camera</button>    
                        </div>  
                    </div>  
   </div>  
              
   </div>  
  
<script>  
    $("#btnbtncameraupload").click(function () {  
        if ($("#example").css('display') == 'none') {  
            $("#example").show();  
  
            $('#example').photobooth().on("image", function (event, dataUrl) {  
  
                $("#imgcamera").attr('src', dataUrl);  
                $("#pp").val(dataUrl);  
            });  
            $('#example').data("photobooth").resize(400, 300);  
        }  
        
    });  
</script>  

مرحله پنجم: فایل جاوااسکریپت زیر را در پروژه خود قرار می دهیم. برای دانلود آن می توانید به اینجا بروید. برای bootstrap-fileupload.js نیز می توانید از این لینک استفاده نمایید.

<script src="~/Scripts/bootstrap-fileupload.js"></script>  
<script src="~/Scripts/photowebcam.js"></script>  

مرحله ششم: کد زیر را برای متد Post در controller می نویسیم.

    [AcceptVerbs(HttpVerbs.Post)]  
    public ActionResult AddEmployee(usr_User UserNewAdd, HttpPostedFileBase file, FormCollection fc)   
    {  
        Random objrandom = new Random();  
        string Password = Convert.ToString(objrandom.Next());  
      
        //For Store Image in Database...!!!    
      
        if (UserNewAdd.ProfilePicture != null && file == null)   
        {  
            UserNewAdd.ProfilePicture = UserNewAdd.ProfilePicture.Replace("data:image/png;base64,", ""); //The converted base64 string data have "data:image/png;base64," as additional data     
            string base64 = UserNewAdd.ProfilePicture.Substring(UserNewAdd.ProfilePicture.IndexOf(',') + 1);  
            base64 = base64.Trim('\0');  
            byte[] chartData = Convert.FromBase64String(base64);  
            CreateImage(chartData, UserNewAdd.EmailID.ToString() + ".png");  
            UserNewAdd.ProfilePicture = UserNewAdd.EmailID.ToString() + ".png";  
        }  
      
        if (file != null)   
        {  
            var ProfPicName = Path.GetFileName(file.FileName);  
            var path = Path.Combine(Server.MapPath("~/ProfilePicture/"), ProfPicName);  
            file.SaveAs(path);  
            UserNewAdd.ProfilePicture = file.FileName;  
        }  
      
        //For Store language Known...!!!    
        if (fc["languge"] != null)   
        {  
            String languageKnownList = fc["languge"].ToString();  
            UserNewAdd.LanguageKnown = languageKnownList;  
        }  
        //Create new Guid For user...!!!    
        UserNewAdd.UserID = Guid.NewGuid();  
        UserNewAdd.Password = Password;  
        DateTime UserDOB = new DateTime();  
        DateTime UserJoinDate = new DateTime();  
        DateTime UserReleaveDate = new DateTime();  
        if (fc["DOB"] != null)   
        {  
            UserDOB = DateTime.ParseExact(fc["DOB"], "MM/dd/yyyy", CultureInfo.InvariantCulture);  
        }  
      
        if (fc["JoiningDate"] != null)   
        {  
            UserJoinDate = DateTime.ParseExact(fc["JoiningDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);  
        }  
        if (fc["ReleavingDate"] == null || fc["ReleavingDate"] == "")   
        {  
            UserReleaveDate = Convert.ToDateTime(null);  
        }  
        else   
        {  
            UserReleaveDate = DateTime.ParseExact(fc["ReleavingDate"], "MM/dd/yyyy", CultureInfo.InvariantCulture);  
        }  
        UserNewAdd.DOB = UserDOB;  
        UserNewAdd.JoiningDate = UserJoinDate;  
        UserNewAdd.IsActive = false;  
        UserNewAdd.RoleName = _dataContext.usr_Roles.Where(s = > s.RoleID == UserNewAdd.RoleID).SingleOrDefault().RoleName;  
        //For Add and Save record in database...!!!    
        _dataContext.usr_Users.InsertOnSubmit(UserNewAdd);  
      
        usr_Address AddAddressDetail = new usr_Address();  
        AddAddressDetail.AddressID = Guid.NewGuid();  
        AddAddressDetail.StreetOne = UserNewAdd.usrAddressList.StreetOne;  
        AddAddressDetail.StreetTwo = UserNewAdd.usrAddressList.StreetTwo;  
        AddAddressDetail.Landmark = UserNewAdd.usrAddressList.Landmark;  
        AddAddressDetail.City = UserNewAdd.usrAddressList.City;  
        AddAddressDetail.State = UserNewAdd.usrAddressList.State;  
        AddAddressDetail.Country = UserNewAdd.usrAddressList.Country;  
        AddAddressDetail.UserID = UserNewAdd.UserID;  
        AddAddressDetail.AddressType = "Primary Address";  
        _dataContext.usr_Address.InsertOnSubmit(AddAddressDetail);  
        _dataContext.SubmitChanges();  
        if (UserNewAdd.usrAddressList.isper == true)   
        {  
            usr_Address PerAdress = new usr_Address();  
            PerAdress.AddressID = Guid.NewGuid();  
            PerAdress.StreetOne = UserNewAdd.usrAddressList.streatone1;  
            PerAdress.StreetTwo = UserNewAdd.usrAddressList.steattwo1;  
            PerAdress.Landmark = UserNewAdd.usrAddressList.landmark1;  
            PerAdress.City = UserNewAdd.usrAddressList.city1;  
            PerAdress.State = UserNewAdd.usrAddressList.state1;  
            PerAdress.Country = UserNewAdd.usrAddressList.country1;  
            PerAdress.UserID = UserNewAdd.UserID;  
            PerAdress.AddressType = "Permanent Address";  
            _dataContext.usr_Address.InsertOnSubmit(PerAdress);  
            _dataContext.SubmitChanges();  
        }  
      
        string strLink = Convert.ToString(ConfigurationSettings.AppSettings["ApplicationPath"]) + "/Login/Login?UserID=" + EncryptionedString(UserNewAdd.UserID.ToString());  
      
        String msg = SendEmailWithPasswordKey(UserNewAdd.FirstName + " " + UserNewAdd.LastName, UserNewAdd.EmailID, Password, strLink);  
      
        return RedirectToAction("EmployeeList");  
    }  

مرحله هفتم: حال می توانیم، برنامه را اجرا کنیم، فیلد عکس پروفایل و سپس دکمه Image را انتخاب کنیم. سپس می توانیم آن را به Drive خودمان آپلود نماییم.

مرحله هشتم: اگر بتوانید با دوربین عکس بگیرید، می توانیددکمه Upload From Camera را انتخاب نمایید. (این قابلیت، تنها زمانی کار می کند که دوربین شما از لپ تاپ و موبایل و... پشتیبانی کند)

مرحله نهم: Device به اشتراک گذاشته شده را انتخاب می کنیم.

 

مرحله دهم: سپس دوربین شروع به کار می کند و می توانید عکس بگیرید و این عکس در کادر عکس پروفایل نمایش داده خواهد شد.