locked
Implement my javascript code in order to show the current image of my ads RRS feed

  • Question

  • User1991482975 posted

    Hi, i have a form where i can edit my AD and i have a javascript that allow me to show the picture choosen by the upload imput.

    What i need is to implement this script in order to show (if my AD has an image) the image of the add in my <img id="output" style="max-width:200px;" />

    This is my code:

                            <div class="row photo-div-file" style="background-color:#ffffff;">
                                <div class="col-sm-12 col-md-12">
                                    <p>
                                        <label for="file1" class="photo-label-file">
                                            <b class="fa fa-pencil-square-o"></b>
    
                                            <i class="fa fa-camera"></i>
    
                                            <span>@ViewRes.Shared.UploadFoto</span>
                                        </label>
                                        <input class="photo-input-file" type="file" accept="image/*" onchange="loadFile(event)" name="files" id="file1" translate="yes">
                                    </p>
                                    <img id="output" style="max-width:200px;" />
                                </div>
                            </div>

    this i my javascript

    @section Scripts{
        @Scripts.Render("~/bundles/jqueryval")
        <script>
            var loadFile = function (event) {
                var reader = new FileReader();
                reader.onload = function () {
                    var output = document.getElementById('output');
                    output.src = reader.result;
                };
                reader.readAsDataURL(event.target.files[0]);
            };
        </script>
    }

    so if my image is not null

                        @if (Model.AnnonceAddress != null)
                        {
                             .....
                        }

    i need to show the current image and if the user chose another image with the upload imput, just replace it as it works now.

    Friday, June 15, 2018 3:43 PM

All replies

  • User36583972 posted


    Hi grafic,

    i need to show the current image and if the user chose another image with the upload imput, just replace it as it works now.

    According to your description, I am not very clear about what you are going to do. Please give a further description of what you are going to do.

    Beside, I suggest you can upload a running demo(Including your test material). We can download it and debugging. This will help us quickly analyze your problem.

    Best Regards,

    Yong Lu

    Monday, June 18, 2018 5:39 AM
  • User1991482975 posted

    Hi, in fact my JS code allow me simply to display the image choosen by the upload input.. tha's all..

    what i would love to implement is simply to show a default image at the first time ( if image extists)

    how to achive this?

    Monday, June 18, 2018 8:14 AM
  • User36583972 posted


    Hi grafic,

    Hi, in fact my JS code allow me simply to display the image choosen by the upload input.. tha's all..

    what i would love to implement is simply to show a default image at the first time ( if image extists)

    You can try the following ways.

    1: Check the AnnonceAddress whether is null. Then, show the default image.

     @if (Model.AnnonceAddress != "" || Model.AnnonceAddress != null)
        {
            <div class="result">
                <img src="@Href(AnnonceAddress)" alt="test AnnonceAddress not null" />
            </div>
        }
    


    2: Write a controller action that will write the image into the response stream and set the proper content type to say "image/png". Then you can use the img tag to reference this action in your view:

    ASP.Net MVC How to display an image property of a model in a view?
    https://stackoverflow.com/questions/1409602/asp-net-mvc-how-to-display-an-image-property-of-a-model-in-a-view

    3: Besides, you can save your image into database as ByteArray. Then, when the ByteArray is not null. you can show the default image in the image control.

    MVC How to display a byte array image from model
    https://stackoverflow.com/questions/17952514/mvc-how-to-display-a-byte-array-image-from-model


    Best Regards,

    Yong Lu

    Tuesday, June 19, 2018 2:30 AM
  • User1991482975 posted

    Hi, Yohann, the problem it is not about if the image is null or not..

    is about how to populate the javascript  script already done, with a default image..

    Tuesday, June 19, 2018 7:22 AM
  • User36583972 posted

    Hi grafic,

    Yohann, the problem it is not about if the image is null or not..

    is about how to populate the javascript  script already done, with a default image..

    It is not only checking the image is null or not. When the Model contains the default image address, you can show the image at the first time. Then, you can display the image chosen by the upload input.

    Best Regards,

    Yong Lu

    Tuesday, June 19, 2018 10:03 AM