I have a function in jquery that allows me to get the name of a file that was uploaded in ie7. I am able to get the name of the file, but I am also trying to get the base64 string of the file. Is there any way to alter this function below to do that?
var thumbnail_title_preview = {
update: function(value, event_target) {
var parent_upload_fields = $(event_target).parents('.upload-photos');
var photos_list = $('.upload-photos-list-inner', parent_upload_fields);
var thumbnail = document.createElement("div");
$(thumbnail).addClass('uploaded-thumbnail-title');
var file_name = value;
if(ie7) {
file_name_array = file_name.split('\\');
file_name = file_name_array[file_name_array.length - 1];
} else {
file_name = file_name.replace('C:', '');
file_name = file_name.replace('D:', '');
file_name = file_name.replace('\\fakepath\\', '');
}
if(file_name.length > 12) {
file_name = file_name.substring(0, 12) + '...';
}
$(thumbnail).append('<p>' + file_name + '</p>');
$(thumbnail).append('<a class="remove-photo" href="#"></a>');
$(photos_list).append(thumbnail);
var number_of_thumbnails = $('.uploaded-thumbnail-title', parent_upload_fields).length;
$(photos_list).css({ 'width': number_of_thumbnails * (117 + 20) });
if(number_of_thumbnails == 5) {
$('.upload-photos-add', parent_upload_fields).css({ 'display': 'none' });
$(parent_upload_fields).addClass('has-five-photos');
} else {
$(parent_upload_fields).removeClass('has-five-photos');
}
if(ie7) {
updateTinyScrollbar();
} else {
$('.upload-photos-list').perfectScrollbar('update');
var scrollbar_style = $('.ps-scrollbar-x-rail', parent_upload_fields).css('display');
if(scrollbar_style == 'block') {
$(parent_upload_fields).addClass('has-perfect-scrollbar');
} else {
$(parent_upload_fields).removeClass('has-perfect-scrollbar');
}
}
}
}
This is the html:
<div class="upload-photos clearfix" runat="server">
<div class="upload-photos-add" id="Q0011_00" runat="server">
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" ></asp:AjaxFileUpload>
</div>
<div class="upload-photos-list">
<div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0011_00">
</div>
</div>
</div>
If image file is not crossOrigin
(see canvas.toDataURL() SecurityError , Understanding the HTML5 Canvas image security rules ) , should be able to retrieve data-uri
representation of image file
utilizing HTMLCanvasElement.toDataURL() . If the image file , or src
is crossOrigin
, could utilize FileReader
to retrieve data-uri
of DOM
img
element - as type
text/html
- instead of canvas
's .toDataURL()
( type
image/png
) , to avoid possible CORS issue with tainted
canvas
(see links above)
Try
var body = document.body;
var img = document.createElement("img");
// `value` : `img` path (local , _not_ `crossOrigin`)
img.src = value;
// set `display`:`none` at `img` if _not_ displaying "original" `img`
// img.style.display = "none";
body.appendChild(img);
var canvas = document.createElement("canvas");
// set `display`:`none` at `canvas` ,
// if _not_ displaying `canvas` (`thumbnail`)
var ctx = canvas.getContext("2d");
body.appendChild(canvas);
// `data-uri` of `thumbnail` image
// to retrieve `base64` encoding only , `datauri.split(",")[1]`
// `datauri.split(",")
var datauri;
img.addEventListener("load", function(e) {
// adjust `thumbnail` `width` , `height` here
canvas.width = "50";
canvas.height = "50";
ctx.drawImage(e.target, 0, 0);
// `img` `data-uri` , scaled to `canvas` `width` , `height`
datauri = canvas.toDataURL();
// do stuff with `datauri` of `img`
body.appendChild(document.createElement("br"));
// `datauri` of `thumbnail` image
body.appendChild(document.createTextNode(datauri));
return false
}, false);
var value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABa0lEQVR4Xu3VwQkAQAjEQO2/aA+uijzGCkLC4s7cjcsYWEEyLT6IIK0egsR6CCJIzUCMxw8RJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhWIggMQMxHAsRJGYghmMhgsQMxHAsRJCYgRiOhQgSMxDDsRBBYgZiOBYiSMxADMdCBIkZiOFYiCAxAzEcCxEkZiCGYyGCxAzEcCxEkJiBGI6FCBIzEMOxEEFiBmI4FiJIzEAMx0IEiRmI4ViIIDEDMRwLESRmIIZjIYLEDMRwLESQmIEYjoUIEjMQw7EQQWIGYjgWIkjMQAzHQgSJGYjhPE5Hx53K44yoAAAAAElFTkSuQmCC"; var body = document.body; var img = document.createElement("img"); // `value` : `img` path (local , _not_ `crossOrigin`) img.src = value; img.title = "original image"; // set `display`:`none` at `img` if _not_ displaying "original" `img` (left) // diplayed here to view different dimensions between "original image" , // "thumbnail image" (right) // img.style.display = "none"; body.appendChild(img); // space between original image and `thumbnail` image body.appendChild(document.createTextNode(" ")); var canvas = document.createElement("canvas"); canvas.title = "thumbnail image"; var ctx = canvas.getContext("2d"); body.appendChild(canvas); var datauri; img.addEventListener("load", function(e) { // adjust `thumbnail` `width` , `height` here canvas.width = "50"; canvas.height = "50"; ctx.drawImage(e.target, 0, 0); // `img` `data-uri` , scaled to `canvas` `width` , `height` datauri = canvas.toDataURL(); // do stuff with `datauri` of `img` body.appendChild(document.createElement("br")); body.appendChild(document.createTextNode(datauri)); return false }, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.