То что вам нужно - insertBefore (MDN)

<section class="wrapper">
   <div class="item">Блок 1</div>
   <div class="item">Блок 2</div>
   <div class="item">Блок 3</div>
   <div class="item">Блок 4</div>
   <div class="item">Блок 5</div>
</section>

var itemListParent = document.querySelector('.wrapper');
var itemList = document.querySelectorAll('.item');

// сработает как appendChild (т.к. второй аргумент null) - поместит второй элемент в конец родительского.
itemListParent.insertBefore(itemList[1], null);

// сработает как того предполагает insertBefore() - вставит пятый элемент перед первым
itemListParent.insertBefore(itemList[4], itemList[0]);

Плюс применения insertBefore (или appendChild) в том, что прикрепленные слушатели к элементу не сотрутся как в случае использования innerHTML.

Так и должно быть. Если в массиве подаваемом в json_encode есть недопустимые символы вроде кириллицы - json_encode преобразует их в UTF-8.

Для json_encode вторым аргументов можно задать параметр JSON_UNESCAPED_UNICODE - перестаёт кодировать многобайтные символы Unicode.

json_encode( $array, JSON_UNESCAPED_UNICODE ); // От PHP 5.4.0

По личной практике скажу - на некоторых проектах (с которыми я работал), весь проект использовал CP1251 (Windows-1251), из за этого json_encode() может работать не корректно и тем более с параметром JSON_UNESCAPED_UNICODE

1.

div.innerHTML = "<img class=\"img-list-itam\" src='" + e.target.result + "' />";

2.

...
var div = document.createElement('div'), img;
div.innerHTML = "<img src='" + e.target.result + "' />";

img = div.children[0];

img.className = img.className.split( " " );
img.className.push( "img-list-itam" );
img.className = classes.join( " " );

document.getElementById('list').insertBefore(div, null);
...