Pass file from Javascript upload to PHP

I'm working on a script to let the user upload a file and sees a upload status and the file is then saved on the server.

The problem is that I cannot use the php api. So I was thinking to upload the file with javascript where I can easly get the upload status but then I want to pass the file to php and save it.

Is this possible?

This is the javascript code to upload.

<!DOCTYPE html>
<html>
<head >
<title>Upload Files using XMLHttpRequest</title>

<script type="text/javascript">
    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
            var fileSize = 0;
            if (file.size > 1024 * 1024)
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

            document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
            document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
            document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
    }

    function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "UploadHandler.ashx");
        xhr.send(fd);
    }

    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            document.getElementById('prog').value = percentComplete;
        }
        else {
            document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
    }

    function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }

    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }
</script>

</head>
<body>
    <form id="form1">
    <div>
        <label for="fileToUpload">
            Select a File to Upload</label>
        <input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();" />
    </div>
    <div id="fileName">
    </div>
    <div id="fileSize">
    </div>
    <div id="fileType">
    </div>
    <div>
        <input type="button" onclick="uploadFile()" value="Upload" />
    </div>
    <div id="progressNumber">
    </div>
    <progress id="prog" value="0" max="100.0"></progress>
    </form>
</body>
</html>

Answers


I have a Gist on this. It uses xhr.send(FormData) and shows minimal code to handle the file in PHP.


Make an AJAX request to a PHP file, send the uploaded file properties like name, etc. and let it open that, move that, rename that or whatever needed. It should works, huh?

did I understood your question correctly?

Sample Code:

In Javascript:

// xhr
var http = new XMLHttpRequest();
var url = "file_handler.php";
var file_data = "name=mypic.jpg&size=123&othe=etc";
http.open("POST", url, true);

// headers
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", file_data.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}

http.send(file_data);

In file_handler.php:

// file data
$file_data = $_POST['file_data'];

// working on the file
$temp_dir = 'usr/upload/';
$new_dir = 'usr/photos/';

// new unique name
$new_name = time() . '_' . $file_data['name'];

// copy?
if (copy($temp_dir . $file_data['name'], $new_dir . $new_name)) {
    unlink($temp_dir . $file_data['name']);
}

// rename?
rename($temp_dir . $file_data['name'], $temp_dir . $new_name);

// delete old file?
unlink($temp_dir . $file_data['name']);

// do whatever else needed here ...
// echo some JSON data to interact with your client-side JS code, maybe ...

Need Your Help

asp.net web api - json serialization of interface member resulting in mystifying error

asp.net json asp.net-web-api

I'm using ASP.NET Web API and I'm trying to return an instance of a class that looks like this:

Android - ObjLoader from Android Gaming Book error

java android opengl-es gaming .obj

I apologize for asking such a question, but I am lost and cannot figure out what to do.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.