EasyUI
Home
Demo
Tutorial
Documentation
Download
Extension
Contact
Forum
EasyUI Forum
June 26, 2024, 02:48:21 AM
Welcome,
Guest
. Please
login
or
register
.
1 Hour
1 Day
1 Week
1 Month
Forever
Login with username, password and session length
News
:
Home
Help
Search
Login
Register
EasyUI Forum
>
General Category
>
EasyUI for jQuery
>
Drop image to img and upload with filebox
Pages: [
1
]
« previous
next »
Print
Author
Topic: Drop image to img and upload with filebox (Read 2346 times)
jega
Full Member
Posts: 193
Drop image to img and upload with filebox
«
on:
January 09, 2022, 04:06:39 PM »
Hi.
Have tried to find a solution for dropping an image to an img and preview it. After that, just push the filebox upload button.
Anyone that have an solution ??
Jesper
Logged
jega
Full Member
Posts: 193
Re: Drop image to img and upload with filebox
«
Reply #1 on:
January 09, 2022, 04:43:10 PM »
Now i got this code
(My filebox $('#file').filebox)
const image_drop_area = document.querySelector("#image_drop_area");
var uploaded_image;
// Event listener for dropping the image inside the div
image_drop_area.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
fileList = event.dataTransfer.files;
//document.querySelector("#file_name").textContent = fileList[0].name;
readImage(fileList[0]);
});
// Converts the image into a data URI
readImage = (file) => {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
uploaded_image = event.target.result;
document.querySelector("#image_drop_area").style.backgroundImage = `url(${uploaded_image})`;
});
reader.readAsDataURL(file);
}
The image is shown in div, but how to get it into the filebox, to upload
Logged
Pages: [
1
]
Print
« previous
next »
Jump to:
Please select a destination:
-----------------------------
General Category
-----------------------------
=> News
=> General Discussion
=> EasyUI for jQuery
=> EasyUI for Angular
=> EasyUI for Vue
=> EasyUI for React
=> Bug Report
Loading...