5

I want to allow the user to upload images on chrome extension example folder name (upload) and without submit button

<form action="/upload"> <input type="file" name="myimages" accept="image/*"> </form> 

show images

<span class="AvGbtn" id="AvBgIds" style="background-image: url(Here i want to show upload images url ); background-size: 100% 100%;" oncontextmenu="return false"> </span> 

1 Answer 1

3
+50

$( document ).ready(function() { $( '#myimages' ).change(function() { var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, ''); $( '#myform' ).submit(); $( '#uploaded').append('<img src="/upload/' + filename + '"/>'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myform" action="/upload"> <input type="file" name="myimages" id="myimages" accept="image/*"> </form> <div id="uploaded"> </div>

Use the onchange event of the file upload field to submit the form.

EDIT:

Added functionality to display the uploaded image in the div below the form.

Credits: Use jQuery to get the file input's selected filename without the path

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for your help, is ok and with submit button, just i want to show the upload images on this div <span class="AvGbtn" id="AvBgIds" style="background-image: url(Here i want to show upload images url ); background-size: 100% 100%;" oncontextmenu="return false"> </span>
so i want to allow user to upload multi images and show all images in that div? i don't know if that is possible or no?
Thanks you, I have not tested that! (health reasons) but I accept it as a correct answer. Thanks again.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.