javascript - I want to load images withen the folder and want to get all images in base64 in my js for future use -


i facing issue last image in image array due kind of filereader library function onloadend. how can base64 images in folder. 

<input id="file-input" multiple webkitdirectory type="file" /> var input = document.getelementbyid('file-input'); var file_names = ""; var entries_length = 0; var entries_count = 0; var image = new array();    var obj = {}; var j = 0; input.onchange = function(e) {         var files = e.target.files; // filelist         entries_length = files.length;         console.log(files);          (var = 0, f; f = files[i]; ++i){             console.log("i:"+i);             entries_count = entries_count + 1;             //console.debug(files[i].webkitrelativepath);             if(files[i].type=="image/jpeg")             {                  var string = files[i].webkitrelativepath;                 var name = string.split("/")[3]; //this because image in 3rd dir in folder                 var reader = new filereader();                 reader.onloadend = function() {                          obj.name = string.split("/")[3];                         obj.image = reader.result;                         image[j] = obj;                         j = j+1;                  }                 reader.readasdataurl(files[i]);              }          }        console.log(image);     }

the issue caused asynchronous loading of files. iterate on array , set onloadend handler reader each time, start loading calling readasdataurl.

one problem time first image loads, possible for loop has completed, , i @ last index of array.

at point, obtaining path files[i].webkitrelativepath give last filename, , not 1 expecting.

check example readasdataurl on mdn see 1 possible solution - each load performed in separate function, preserves scope, along file.name. not put off construction using: [].foreach.call(files, readandpreview). way map on files, filelist , not regular array (so list not have foreach method of own).

so, should sufficient wrap loading logic in function takes file object parameter:

var images = [];  function loadfile(f) {     var reader = new filereader();     reader.onloadend = function () {         images.push({             name : f.name, // use whatever naming magic prefer here             image : reader.result         });     };     reader.readasdataurl(f); }  (var i=0; i<files.length; i++) {     loadfile(files[i]); }

each call of function 'remembers' file object called with, , prevents filename getting messed up. if interested, read on closures.

this has nice effect of isolating reader objects, because have sneaking suspicion that, although create new 'local' reader each iteration, javascript scoping rules weird , readers interfering each other (what happens if 1 reader loading, in same scope create new reader same variable name? not sure).

now, not know how long take images loaded, if want take action right after that, have perform check each time onloadend gets called. essence of asynchronous behavior.

as aside, should note pointless manually keep track of last index of images, j. should use images.push({ name: "bla", image: "base64..." }). keeping indices manually opens possibilities bugs.


Comments

Post a Comment

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more