英文:
Uploading multiple images and convert them to base64?
问题
I can help with the translation of the code. Here's the translated code:
<div class="form-group"><label for="product_photo_1">照片 1</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_1" multiple /><label class="custom-file-label" for="product_photo_1" data-browse="选择">请选择文件...</label></div><div id="product_photo_1_result"></div></div><div class="form-group"><label for="product_photo_2">照片 2</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_2" multiple /><label class="custom-file-label" for="product_photo_2" data-browse="选择">请选择文件...</label></div><div id="product_photo_2_result"></div></div><script>const convertBase64 = (file) => {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = () => {resolve(fileReader.result);};fileReader.onerror = (error) => {reject(error);};});};const uploadImage = async (event, id) => {const file = event.target.files[0];const base64 = await convertBase64(file);document.getElementById("product_photo_" + id + "_result").innerHTML += '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';};document.getElementById("product_photo_1").addEventListener("change", (event) => {for (var index = 1; index <= document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for (var index = 1; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2);}});</script>
This code appears to be related to creating a form for uploading multiple images and displaying them as base64 encoded images using jQuery's POST.
英文:
I'm trying to create a form where you can upload multiple images using two file inputs, see the images as base64 and later submit them using jQuery's POST. The problem is that when I select 3 different images, I see only the last one 3 times. I guess the problem is in the for in the addEventListener - maybe it's not in the right place?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="form-group"><label for="product_photo_1">Photos 1</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_1" multiple /><label class="custom-file-label" for="product_photo_1" data-browse="Select">Please, select a file...</label></div><div id="product_photo_1_result"></div></div><div class="form-group"><label for="product_photo_2">Photos 2</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_2" multiple /><label class="custom-file-label" for="product_photo_2" data-browse="Select">Please, select a file...</label></div><div id="product_photo_2_result"></div></div><script>const convertBase64 = (file) => {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = () => {resolve(fileReader.result);};fileReader.onerror = (error) => {reject(error);};});};const uploadImage = async (event, id) => {const file = event.target.files[0];const base64 = await convertBase64(file);document.getElementById("product_photo_" + id + "_result").innerHTML += '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';};document.getElementById("product_photo_1").addEventListener("change", (event) => {for(var index = 1; index <= document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for(var index = 1; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2);}});</script>
<!-- end snippet -->
答案1
得分: 2
在 uploadImage 函数中，你每次都传递了 event 参数并选择了第一个文件
const file = event.target.files[0];
相反，你可以将文件逐个传递给 uploadImage 函数。
这里是示例：
<div class="form-group"><label for="product_photo_1">Photos 1</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_1" multiple /><label class="custom-file-label" for="product_photo_1" data-browse="Select">Please, select a file...</label></div><div id="product_photo_1_result"></div></div><div class="form-group"><label for="product_photo_2">Photos 2</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_2" multiple /><label class="custom-file-label" for="product_photo_2" data-browse="Select">Please, select a file...</label></div><div id="product_photo_2_result"></div></div><script>const convertBase64 = (file) => {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = () => {resolve(fileReader.result);};fileReader.onerror = (error) => {reject(error);};});};const uploadImage = async (file, id) => {const base64 = await convertBase64(file);document.getElementById("product_photo_" + id + "_result").innerHTML += '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';};document.getElementById("product_photo_1").addEventListener("change", (event) => {let files = document.getElementById("product_photo_1").files;for (let index = 0; index <= files.length; index++) {uploadImage(files[index], 1);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {let files = document.getElementById("product_photo_2").files;for (let index = 0; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(files[index], 2);}});</script>
英文:
In uploadImage function you are passing event argument and select first file every time
const file = event.target.files[0];
Instead you can pass files one by one to the uploadImage.
Here is the example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="form-group"><label for="product_photo_1">Photos 1</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_1" multiple /><label class="custom-file-label" for="product_photo_1" data-browse="Select">Please, select a file...</label></div><div id="product_photo_1_result"></div></div><div class="form-group"><label for="product_photo_2">Photos 2</label><div class="custom-file"><input type="file" class="custom-file-input" id="product_photo_2" multiple /><label class="custom-file-label" for="product_photo_2" data-browse="Select">Please, select a file...</label></div><div id="product_photo_2_result"></div></div><script>const convertBase64 = (file) => {return new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = () => {resolve(fileReader.result);};fileReader.onerror = (error) => {reject(error);};});};const uploadImage = async (file, id) => {const base64 = await convertBase64(file);document.getElementById("product_photo_" + id + "_result").innerHTML += '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';};document.getElementById("product_photo_1").addEventListener("change", (event) => {let files = document.getElementById("product_photo_1").files;for (let index = 0; index <= files.length; index++) {uploadImage(files[index], 1);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {let files = document.getElementById("product_photo_2").files;for (let index = 0; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(files[index], 2);}});</script>
<!-- end snippet -->
答案2
得分: 0
In the event handlers, you are doing a loop, but you are not using the value of index per iteration:
document.getElementById("product_photo_1").addEventListener("change", (event) => {for (var index = 1; index <= document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1); //passing only the event and an index}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for (var index = 1; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2); //passing only the event and the index}});
And now, let's use index for all calls as well as clearing up when it's 0:
const uploadImage = async (event, id, index) => {let context = document.getElementById("product_photo_" + id + "_result");const file = event.target.files[index]; //we get the correct file;const base64 = await convertBase64(file);let template = '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';if (index === 0) context.innerHTML = template; //clearing older values and adding the first elementelse context.innerHTML += template; //appending the (not first) element};
Instead, you will need to pass the index as well, like this:
document.getElementById("product_photo_1").addEventListener("change", (event) => {for (var index = 0; index < document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1, index);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for (var index = 0; index < document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2, index);}});
英文:
In the event handlers, you are doing a loop, but you are not using the value of index per iteration:
document.getElementById("product_photo_1").addEventListener("change", (event) => {for(var index = 1; index <= document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1); //passing only the event and an index}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for(var index = 1; index <= document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2); //passing only the event and the index}});And now, let's use `index` for all calls as well as clearing up when it's 0:
const uploadImage = async (event, id, index) => {let context = document.getElementById("product_photo_" + id + "_result");const file = event.target.files[index]; //we get the correct file;const base64 = await convertBase64(file);let template = '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';if (index === 0) context.innerHTML = template; //clearing older values and adding the first elementelse context.innerHTML += template; //appending the (not first) element};
Instead, you will need to pass the index as well, like this:
document.getElementById("product_photo_1").addEventListener("change", (event) => {for(var index = 0; index < document.getElementById("product_photo_1").files.length; index++) {uploadImage(event, 1, index);}});document.getElementById("product_photo_2").addEventListener("change", (event) => {for(var index = 0; index < document.getElementById("product_photo_2").files.length; index++) {uploadImage(event, 2, index);}});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论