javascript - Uploading a file using ajax and php

I want to implement file uploading using ajax and php. I have a form input tag. I want that onchange event of the input tag, file will be uploaded to the server and I will get the path of the file in a variable in javascript! So, I want to remain on the same page and upload the file, get the file path in the javascript variable.

Any pseudo code, examples, or tutorials would be greatly appreciated.

Share asked Aug 2, 2012 at 11:19 MJQ 1,7866 gold badges35 silver badges61 bronze badges

I have uploaded the file using php. But it goes to the php page. I want to implement it remaining on the same page. – MJQ Commented Aug 2, 2012 at 11:22

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

Demo url:--

http://jquery.malsup./form/progress.html

You can download jQuery files from this url and add in html <head> tag

http://ajax.googleapis./ajax/libs/jquery/1.7/jquery.js

http://malsup.github./jquery.form.js

Try this:

This is my html markup:

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #1</h1>
    <code>&lt;input type="file" name="myfile"></code>
        <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="uploadedfile"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

<script src="http://ajax.googleapis./ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github./jquery.form.js"></script>
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    plete: function(xhr) {
     bar.width("100%");
    percent.html("100%");
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

</body>
</html>

My php code:

<?php
$target_path = "uploads/";

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}
?>

This is one way and how I did it. Working with XHR. I have it up and running as we speak

Using HTML5 file uploads with AJAX and jQuery

http://dev.w3/2006/webapi/FileAPI/#FileReader-interface

$(':file').change(function(){
            var file = this.files[0];
            name = file.name;
            size = file.size;
            type = file.type;

            if(file.name.length < 1) {

            }
            else if(file.size > 100000) {
                alert("File is to big");
            }
            else if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {
                alert("File doesnt match png, jpg or gif");
            }
            else { 
                $(':submit').click(function(){
                    var formData = new FormData($('*formId*')[0]);
                    $.ajax({
                        url: 'script',  //server script to process data
                        type: 'POST',
                        xhr: function() {  // custom xhr
                            myXhr = $.ajaxSettings.xhr();
                            if(myXhr.upload){ // if upload property exists
                                myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // progressbar
                            }
                            return myXhr;
                        },
                        //Ajax events
                        success: pleteHandler = function(data) {
                            /*
                            * workaround for crome browser // delete the fakepath
                            */
                            if(navigator.userAgent.indexOf('Chrome')) {
                                var catchFile = $(":file").val().replace(/C:\\fakepath\\/i, '');
                            }
                            else {
                                var catchFile = $(":file").val();
                            }
                            var writeFile = $(":file");

                            writeFile.html(writer(catchFile));

                            $("*setIdOfImageInHiddenInput*").val(data.logo_id);

                        },
                        error: errorHandler = function() {
                            alert("Något gick fel");
                        },
                        // Form data
                        data: formData,
                        //Options to tell JQuery not to process data or worry about content-type
                        cache: false,
                        contentType: false,
                        processData: false
                    }, 'json');
                });
            }
    });

you should probably check out some of the cool jQuery plugins, that can do the job for you, the two popular plugins are.

http://www.uploadify./

http://www.plupload./

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uploading a file using ajax and php - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)