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

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

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

مرحله سوم: یک کلاس مدل 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 به اشتراک گذاشته شده را انتخاب می کنیم.

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