$("#avatarUpload").on('change', function () {
previewFile();
});
var imgBase64;
function previewFile(evt) {
// var preview = document.querySelector('#<%=Avatar.ClientID %>');
// var files = evt.target.file;
var preview = document.getElementById('avatarImg');
//$('#avatarImg');
// var file = document.querySelector('#avatarUpload').files[0];
var input = document.getElementById('avatarUpload');
var dv = document.getElementById('showImg');
var file = input.files[0];
console.log(file);
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
dv.value = reader.result;
imgBase64 = reader.result;
imgBase64 = imgBase64.replace('data:image/png;base64,', '');
imgBase64 = imgBase64.replace('data:image/gif;base64,', '');
// console.log(btoa(reader.result))
}
if (file) {
// alert('file found');
reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file)
// reader.readAsBinaryString(file);
} else {
preview.src = "";
}
}
// var image = document.getElementById("avatarImg").toDataURL("image/png");
var image = imgBase64.replace('data:image/jpeg;base64,', '');
$.ajax({
type: "POST",
url: base + "TPWL/InsertImage",
dataType: "JSON",
data: JSON.stringify({ "obj": image }),
contentType: "application/json;charset=utf-8",
success: function (data) {
console.log(data);
if (data.ResultID != '-1') {
$("#spInfo").html('<strong style="color:green">' + data.Message + '</strong>');
$("#tblDetails tr:gt(0)").remove();
if (data.obj != null) {
AppenHeadData(data.obj.OrderHead);
AppendDetailsTable(data.obj.OrderDetailsDetails)
}
}
else {
$("#spInfo").html('<strong style="color:red">' + data.Message + '</strong>');
}
},
error: function (a, b, c) {
alert(a + '..' + c.statusCode);
// alert(a.statusText);
}
});
});
<div style=" text-align:center;">
<input id="avatarUpload" type="file" name="files[]" accept="image/*" />
<img width="60" height="60" src="123.jpg" id="avatarImg" />
<input type="button" value="Image Upload" id="tbnImgUpload"/>
<textarea id="showImg"></textarea>
</div>
previewFile();
});
var imgBase64;
function previewFile(evt) {
// var preview = document.querySelector('#<%=Avatar.ClientID %>');
// var files = evt.target.file;
var preview = document.getElementById('avatarImg');
//$('#avatarImg');
// var file = document.querySelector('#avatarUpload').files[0];
var input = document.getElementById('avatarUpload');
var dv = document.getElementById('showImg');
var file = input.files[0];
console.log(file);
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
dv.value = reader.result;
imgBase64 = reader.result;
imgBase64 = imgBase64.replace('data:image/png;base64,', '');
imgBase64 = imgBase64.replace('data:image/gif;base64,', '');
// console.log(btoa(reader.result))
}
if (file) {
// alert('file found');
reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file)
// reader.readAsBinaryString(file);
} else {
preview.src = "";
}
}
// var image = document.getElementById("avatarImg").toDataURL("image/png");
var image = imgBase64.replace('data:image/jpeg;base64,', '');
$.ajax({
type: "POST",
url: base + "TPWL/InsertImage",
dataType: "JSON",
data: JSON.stringify({ "obj": image }),
contentType: "application/json;charset=utf-8",
success: function (data) {
console.log(data);
if (data.ResultID != '-1') {
$("#spInfo").html('<strong style="color:green">' + data.Message + '</strong>');
$("#tblDetails tr:gt(0)").remove();
if (data.obj != null) {
AppenHeadData(data.obj.OrderHead);
AppendDetailsTable(data.obj.OrderDetailsDetails)
}
}
else {
$("#spInfo").html('<strong style="color:red">' + data.Message + '</strong>');
}
},
error: function (a, b, c) {
alert(a + '..' + c.statusCode);
// alert(a.statusText);
}
});
});
<div style=" text-align:center;">
<input id="avatarUpload" type="file" name="files[]" accept="image/*" />
<img width="60" height="60" src="123.jpg" id="avatarImg" />
<input type="button" value="Image Upload" id="tbnImgUpload"/>
<textarea id="showImg"></textarea>
</div>
No comments:
Post a Comment