Image upload with Jquery

Asked

Viewed 6,785 times

2

How to upload image using Jquery?

This is a question that has been chasing me for a long time, I hope you can help me.

Well, I’ve been researching and I saw that you have a plugin for this, ajaxForm. However I can not find structure to use it, the page itself has some examples but I had the ability not to understand how to do.

There’s also Formdata that I don’t know where it’s from, so I’m going to do some research. If you can help me with one of those two, which is more viable and easier. I’ll be very grateful.

Thank you in advance!

(A great way to help me would be with the structure of what to give example, so I can learn by looking at how it is done).

php jquery html ajax

2 answers

5


Basically

Create a page with a tag form and place two elements input of the kind file and a button of the kind button. Don’t forget to reference Jquery on your page. As shown on this link.

<html>
<head>
    <title>Upload</title>
</head>
<body>
    <form>
        <input type="file" name="fileimagem" id="fileimagem" />
        <button type="button" id="btn">Enviar</button>
    </form>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").on('click', function(){

                var data = new FormData();
                data.append('fileimagem', $('#fileimagem')[0].files[0]);

                $.ajax({
                    url: 'save.php',
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) 
                    {
                        alert(data);
                    }
                });

            });
        });
    </script>
</body>
</html>

After creating the page now create the script in PHP very simple to write the image in some directory inside your web application.

<?php   

    if (!empty($_FILES['fileimagem']))
    {
        echo move_uploaded_file($_FILES['fileimagem']['tmp_name'], 'img/'.$_FILES['fileimagem']['name']);       
    }
    else
    {
        echo 'false';
    }

Boa Leitura:

1 - move_uploaded_file

2 - Sending Multipart/formdata with jQuery.ajax

3 - Formdata

4 - jQuery Form Plugin

  • In the date append you pass 2 parameters. What would be the first and the second? indicates me some document to read or it is simple thing and you tell me

  • The first parameter would be the name so that I can retrieve in the programming (example $_FILES['fileimagem']) and the second is the content of the file to send to the server which in case is the chosen image !!! Any doubt we are there.

  • @Pedrosoares more on the subject in Formdata.append()

  • I hope you can still help me. I have a problem :( When I put: var data = new Formdata(); data.append('fileimage', $('#fileimage')[0]. files[0]); The ajax request stops working, if I remove and pass another value in date it works normal. know what it can be?

  • Relationship <input type="file" name="fileimagem" id="fileimagem" /> with $('#fileimagem') is the relationship with Jquery taking and accessing that input tag type file (which is the image) but, in Jquery you need to inform $('#fileimagem')[0].files[0] in the second parameter to work. I don’t really know how your code is but, the relation is this.

  • I understood, but my code is locking in js when I create a new Formdata(); ?

  • I did some testing and it’s actually this line that’s catching data.append('fileimage', $('#fileimage')[0]. files[0]);

  • Let’s go continue this discussion in chat.

Show 3 more comments

2

I recommend using the Plupload. Very popular, with good documentation.

inserir a descrição da imagem aqui

Source code:

<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
 
<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : "/examples/upload",
         
        chunk_size : '1mb',
        rename : true,
        dragdrop: true,
         
        filters : {
            // Maximum file size
            max_file_size : '10mb',
            // Specify what files to browse for
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
        },
 
        // Resize images on clientside if we can
        resize: {
            width : 200,
            height : 200,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
 
        // Flash settings
        flash_swf_url : '/plupload/js/Moxie.swf',
     
        // Silverlight settings
        silverlight_xap_url : '/plupload/js/Moxie.xap'
    });
});
</script>

Browser other questions tagged php jquery html ajax

You are not signed in. Login or sign up in order to post.