locked
Allow user to upload images on my folder without submit button RRS feed

  • Question

  • User105007481 posted

    I want to the user to upload images on my site than without click upload images (upload) and without submit button

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

    images showing

    <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>

    Monday, March 18, 2019 1:21 PM

Answers

  • User-1038772411 posted

    Try to solve by following code. It is working for me

    <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>
    $( document ).ready(function() {
    $( '#myimages' ).change(function() {
    var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
    $( '#myform' ).submit();
    $( '#uploaded').append('<img src="/upload/' + filename + '"/>');
    });
    });



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2019 1:30 PM
  • User839733648 posted

    Hi Zhang Wei,

    According to your description and code, I suggest that you could use File Reader and .change() event to achieve your requirement.

    The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,

    using File or Blob objects to specify the file or data to read.

    Here is my testing code.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                function readURL(input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $('#AvBgIds').attr('style', 'background-image:url(' + e.target.result + ')');
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                }
                $("#imgInp").change(function () {
                    readURL(this);
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type='file' id="imgInp" name="myimages" />
            <br />
            <span class="AvGbtn" id="AvBgIds" background-size: 100% 100%;" oncontextmenu="return false">twwwwwwwwwwwwwwwwwvsdgsd</span>
        </form>
    </body>
    </html>
    

    result:

    Best Regrads,

    Jenifer

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 19, 2019 2:38 AM
  • User-2054057000 posted

    You can keep a button hidden. On the change event of your file upload control, you can simply trigger the click even of the button, and your image upload code will be executed.

    Reference - Uploading Files

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 10:37 AM

All replies

  • User-1038772411 posted

    Try to solve by following code. It is working for me

    <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>
    $( document ).ready(function() {
    $( '#myimages' ).change(function() {
    var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
    $( '#myform' ).submit();
    $( '#uploaded').append('<img src="/upload/' + filename + '"/>');
    });
    });



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2019 1:30 PM
  • User839733648 posted

    Hi Zhang Wei,

    According to your description and code, I suggest that you could use File Reader and .change() event to achieve your requirement.

    The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,

    using File or Blob objects to specify the file or data to read.

    Here is my testing code.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                function readURL(input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            $('#AvBgIds').attr('style', 'background-image:url(' + e.target.result + ')');
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                }
                $("#imgInp").change(function () {
                    readURL(this);
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type='file' id="imgInp" name="myimages" />
            <br />
            <span class="AvGbtn" id="AvBgIds" background-size: 100% 100%;" oncontextmenu="return false">twwwwwwwwwwwwwwwwwvsdgsd</span>
        </form>
    </body>
    </html>
    

    result:

    Best Regrads,

    Jenifer

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 19, 2019 2:38 AM
  • User-2054057000 posted

    You can keep a button hidden. On the change event of your file upload control, you can simply trigger the click even of the button, and your image upload code will be executed.

    Reference - Uploading Files

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 10:37 AM