<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<label class="control-label col-sm-3" for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name" placeholder="Enter Name">
<label class="control-label col-sm-3" for="address">Address:</label>
<input type="text" class="form-control" id="address" ng-model="address" placeholder="Enter Address">
<label class="control-label col-sm-3" for="pwd">Please Upload Image:</label>
<input type="file" fileinput="file" id="FlgUpload" class="form-control" ng-model="uploadFile" filepreview="smallImage" />
<input type="button" class="btn btn-success" value="Submit" id="btnSubmit" />
<label class="control-label" ng-bind="address"></label>
<label class="control-label col-sm-3" for="pwd">Uploaded Image:</label>
<img ng-src="{{smallImage}}" class="img-responsive" style="border: thin solid #000000; max-width: 150px; max-height: 150px; width: 150px; height: 150px" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string SendParameters(string name, string address)
{
int instCode = 104;
Dictionary<string, string> dic = new Dictionary<string, string>();
dic.Add("name", name);
dic.Add("address", address);
string writeContent = JsonConvert.SerializeObject(dic);
File.WriteAllText(HttpContext.Current.Server.MapPath("~/Content/"+instCode.ToString()+"/StaticContent/data.json"), writeContent);
return "Data Saved";
}
}
var dataResponse;
var scope;
console.clear();
var uploadedFile;
var app = angular.module('fileUpload', []);
app.controller("upload", function ($scope) { })
.directive("fileinput", [function () {
return {
scope: {
fileinput: "=",
filepreview: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
scope.fileinput = changeEvent.target.files[0];
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.filepreview = loadEvent.target.result;
});
}
reader.readAsDataURL(scope.fileinput);
uploadedFile = scope.fileinput;
alert(uploadedFile);
});
}
}
}]);
function Message(Heading, text) {
var heading = text.split("<br>");
text = text.substring(text.indexOf(">", 1) + 1, text.length);
$.toast_noti({
text: text, // Text that is to be shown in the toast
heading: '<span style=\'font-weight: bold; color:#e74c3c;\'>' + Heading + '</span>',
//false,//'Notification', // Optional heading to be shown on the toast
showHideTransition: 'slide', // fade, slide or plain
allowToastClose: true, // Boolean value true or false
hideAfter: 5000,
// 15000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
stack: 5,
// false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
position: { top: 90, right: 10 },
//'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
bgColor: '#2F3A41', // '#444444', // Background color of the toast
textColor: '#fff', //'#ffffff', // Text color of the toast
textAlign: 'left', // Text alignment i.e. left, right or center
beforeShow: function () {
}, // will be triggered before the toast is shown
afterShown: function () {
}, // will be triggered after the toat has been shown
beforeHide: function () {
}, // will be triggered before the toast gets hidden
afterHidden: function () {
} // will be triggered after the toast has been hidden
});
}
$(function () {
$("[id*=btnSubmit]").click(function () {
var obj = {};
obj.name = $.trim($("[id*=name]").val());
obj.address = $.trim($("[id*=address]").val());
var uploadCtrl = $('#FlgUpload');
$.ajax({
type: "POST",
url: "/Default3.aspx/SendParameters",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
Message("Content", "Successfully Uploaded the Content");
uploadFiles(uploadCtrl);
}
});
return false;
;
});
});
function uploadFiles(uploadCtrl) {
var fileUpload = uploadCtrl.get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
$.ajax({
url: "/ImageHandler.ashx",
type: "POST",
data: data,
contentType: false,
processData: false,
success: function (result) { alert(result); },
error: function (err) {
Message("Image", "Successfully Uploaded the Image");
}
});
// evt.preventDefault();
}