Как загрузить изображение по данным URI в файл ввода с помощью JavaScript? - PullRequest
Новая
       18

Как загрузить изображение по данным URI в файл ввода с помощью JavaScript?

0 голосов
/ 23 ноября 2018

У меня есть эта строка кода 

<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />

, и у меня есть это изображение 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==

, которое я сохранил на своем ПК, хотя я не хочу,Когда я на самом деле загружаю это изображение, веб-страница изменяет innerHTML элемента div с помощью 

<img src='data:image/png;base64....'>

моего загруженного изображения.Поэтому я попытался изменить это (div) с помощью javascript, но это не позволило мне двигаться дальше.Он должен получить какое-то значение для элемента ввода, что, к сожалению, требуется.Как загрузить свое изображение, «присвоив» входному файлу тег «data» uri «value» данных изображения?

1 Ответ

0 голосов
/ 24 ноября 2018

После прочтения вашего расплывчатого ответа, я предполагаю, что у вас есть функция, которая автоматически преобразует входной файл в DIV.

Итак, это может быть клон Преобразовать URI данных в файл и затем добавитьв FormData .Оттуда вы отправляете файл на сервер или что-то еще, возможно, с помощью функции AJAX. 

var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.

Кроме этого, вам, возможно, придется дать больше информации о том, что означает "двигаться дальше".

...