Home AJAX Pure HTML5 file upload

Pure HTML5 file upload

Dec 9, 2011

127 524800

Pure HTML5 file upload

HTML5 upload tutorial: today we will develop a great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all. All made in pure HTML5 Javascript. I’m going to use FileReader (html5) to implement live preview (without uploading to server), and, going to use XMLHttpRequest to send data to server.

Here are our demo and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the sources and lets begin !

Step 1. HTML

At this page you can see out form for upload images

index.html


<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure HTML5 file upload | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>Pure HTML5 file upload</h2>
            <a href="https://script-tutorials.com/pure-html5-file-upload/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="contr"><h2>You can select the file (image) and click Upload button</h2></div>
            <div class="upload_form_cont">
                <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
                    <div>
                        <div><label for="image_file">Please select image file</label></div>
                        <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div>
                    </div>
                    <div>
                        <input type="button" value="Upload" onclick="startUploading()" />
                    </div>
                    <div id="fileinfo">
                        <div id="filename"></div>
                        <div id="filesize"></div>
                        <div id="filetype"></div>
                        <div id="filedim"></div>
                    </div>
                    <div id="error">You should select valid image files only!</div>
                    <div id="error2">An error occurred while uploading the file</div>
                    <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div>
                    <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div>
                    <div id="progress_info">
                        <div id="progress"></div>
                        <div id="progress_percent">&nbsp;</div>
                        <div class="clear_both"></div>
                        <div>
                            <div id="speed">&nbsp;</div>
                            <div id="remaining">&nbsp;</div>
                            <div id="b_transfered">&nbsp;</div>
                            <div class="clear_both"></div>
                        </div>
                        <div id="upload_response"></div>
                    </div>
                </form>
                <img id="preview" />
            </div>
        </div>
    </body>
</html>

Step 2. CSS

css/main.css

I have selected all necessary styles for our html5 upload form

css/main.css

.upload_form_cont {
    background: -moz-linear-gradient(#ffffff, #f2f2f2);
    background: -ms-linear-gradient(#ffffff, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(#ffffff, #f2f2f2);
    background: -o-linear-gradient(#ffffff, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
    background: linear-gradient(#ffffff, #f2f2f2);
    color:#000;
    overflow:hidden;
}
#upload_form {
    float:left;
    padding:20px;
    width:700px;
}
#preview {
    background-color:#fff;
    display:block;
    float:right;
    width:200px;
}
#upload_form > div {
    margin-bottom:10px;
}
#speed,#remaining {
    float:left;
    width:100px;
}
#b_transfered {
    float:right;
    text-align:right;
}
.clear_both {
    clear:both;
}
input {
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    border:1px solid #ccc;
    font-size:14pt;
    padding:5px 10px;
}
input[type=button] {
    background: -moz-linear-gradient(#ffffff, #dfdfdf);
    background: -ms-linear-gradient(#ffffff, #dfdfdf);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));
    background: -webkit-linear-gradient(#ffffff, #dfdfdf);
    background: -o-linear-gradient(#ffffff, #dfdfdf);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')";
    background: linear-gradient(#ffffff, #dfdfdf);
}
#image_file {
    width:400px;
}
#progress_info {
    font-size:10pt;
}
#fileinfo,#error,#error2,#abort,#warnsize {
    color:#aaa;
    display:none;
    font-size:10pt;
    font-style:italic;
    margin-top:10px;
}
#progress {
    border:1px solid #ccc;
    display:none;
    float:left;
    height:14px;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    background: -moz-linear-gradient(#66cc00, #4b9500);
    background: -ms-linear-gradient(#66cc00, #4b9500);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));
    background: -webkit-linear-gradient(#66cc00, #4b9500);
    background: -o-linear-gradient(#66cc00, #4b9500);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')";
    background: linear-gradient(#66cc00, #4b9500);
}
#progress_percent {
    float:right;
}
#upload_response {
    margin-top: 10px;
    padding: 20px;
    overflow: hidden;
    display: none;
    border: 1px solid #ccc;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow: 0 0 5px #ccc;
    background: -moz-linear-gradient(#bbb, #eee);
    background: -ms-linear-gradient(#bbb, #eee);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));
    background: -webkit-linear-gradient(#bbb, #eee);
    background: -o-linear-gradient(#bbb, #eee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
    background: linear-gradient(#bbb, #eee);
}

Step 3. HTML5 JS

js/script.js

// common variables
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';
function secondsToTime(secs) { // we will use this function to convert seconds in normal time format
    var hr = Math.floor(secs / 3600);
    var min = Math.floor((secs - (hr * 3600))/60);
    var sec = Math.floor(secs - (hr * 3600) -  (min * 60));
    if (hr < 10) {hr = "0" + hr; }
    if (min < 10) {min = "0" + min;}
    if (sec < 10) {sec = "0" + sec;}
    if (hr) {hr = "00";}
    return hr + ':' + min + ':' + sec;
};
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
function fileSelected() {
    // hide different warnings
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    // get selected file element
    var oFile = document.getElementById('image_file').files[0];
    // filter for image files
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('error').style.display = 'block';
        return;
    }
    // little test for filesize
    if (oFile.size > iMaxFilesize) {
        document.getElementById('warnsize').style.display = 'block';
        return;
    }
    // get preview element
    var oImage = document.getElementById('preview');
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
        // e.target.result contains the DataURL which we will use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // binding onload event
            // we are going to display some custom image information here
            sResultFileSize = bytesToSize(oFile.size);
            document.getElementById('fileinfo').style.display = 'block';
            document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
            document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
            document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
            document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
        };
    };
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}
function startUploading() {
    // cleanup all temp states
    iPreviousBytesLoaded = 0;
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    document.getElementById('progress_percent').innerHTML = '';
    var oProgress = document.getElementById('progress');
    oProgress.style.display = 'block';
    oProgress.style.width = '0px';
    // get form data for POSTing
    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3
    var vFD = new FormData(document.getElementById('upload_form'));
    // create XMLHttpRequest object, adding few event listeners, and POSTing our data
    var oXHR = new XMLHttpRequest();
    oXHR.upload.addEventListener('progress', uploadProgress, false);
    oXHR.addEventListener('load', uploadFinish, false);
    oXHR.addEventListener('error', uploadError, false);
    oXHR.addEventListener('abort', uploadAbort, false);
    oXHR.open('POST', 'upload.php');
    oXHR.send(vFD);
    // set inner timer
    oTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() { // we will use this function to display upload speed
    var iCB = iBytesUploaded;
    var iDiff = iCB - iPreviousBytesLoaded;
    // if nothing new loaded - exit
    if (iDiff == 0)
        return;
    iPreviousBytesLoaded = iCB;
    iDiff = iDiff * 2;
    var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
    var secondsRemaining = iBytesRem / iDiff;
    // update speed info
    var iSpeed = iDiff.toString() + 'B/s';
    if (iDiff > 1024 * 1024) {
        iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
    } else if (iDiff > 1024) {
        iSpeed =  (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
    }
    document.getElementById('speed').innerHTML = iSpeed;
    document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
}
function uploadProgress(e) { // upload process in progress
    if (e.lengthComputable) {
        iBytesUploaded = e.loaded;
        iBytesTotal = e.total;
        var iPercentComplete = Math.round(e.loaded * 100 / e.total);
        var iBytesTransfered = bytesToSize(iBytesUploaded);
        document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
        document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
        document.getElementById('b_transfered').innerHTML = iBytesTransfered;
        if (iPercentComplete == 100) {
            var oUploadResponse = document.getElementById('upload_response');
            oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>';
            oUploadResponse.style.display = 'block';
        }
    } else {
        document.getElementById('progress').innerHTML = 'unable to compute';
    }
}
function uploadFinish(e) { // upload successfully finished
    var oUploadResponse = document.getElementById('upload_response');
    oUploadResponse.innerHTML = e.target.responseText;
    oUploadResponse.style.display = 'block';
    document.getElementById('progress_percent').innerHTML = '100%';
    document.getElementById('progress').style.width = '400px';
    document.getElementById('filesize').innerHTML = sResultFileSize;
    document.getElementById('remaining').innerHTML = '| 00:00:00';
    clearInterval(oTimer);
}
function uploadError(e) { // upload error
    document.getElementById('error2').style.display = 'block';
    clearInterval(oTimer);
}
function uploadAbort(e) { // upload abort
    document.getElementById('abort').style.display = 'block';
    clearInterval(oTimer);
}

Most of code is already commented. So I will hope that you will understand all this code. Anyway – how it working: when we select file – function ‘fileSelected’ is executing. We filter all unnecessary formats (allow to upload next formats: bmp, gif, jpg, png, tif), in case of huge file – we will draw warning message. Then, through FileReader::readAsDataURL we will draw live preview of selected file. Plus, we will display another information about image: its name, size, type, and dimensions. Process of uploading is a little complicated. But generally, we have to prepare XMLHttpRequest object, add event listeners to next events: progress, load, error and abort. And after – post form data (I have used FormData class) to our ‘upload.php’ receiver.

Step 4. PHP

upload.php

<?php
function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}
$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);
echo <<<EOF
<p>Your file: {$sFileName} has been successfully received.</p>
<p>Type: {$sFileType}</p>
<p>Size: {$sFileSize}</p>
EOF;

As you can see – I’m not uploading file. But, ‘echo’ back all info about accepted file. This information will appear in our <div id="upload_response"></div> element.

Live Demo

Conclusion

Welcome back to read new awesome and unique articles about HTML5. Good luck!

Understanding Closures

Oct 29, 2019

0 9115

The Secrets of Semantic HTML5 for Document Structure

Aug 4, 2019

0 10995

127 COMMENTS

Edik Manoukian Mar 25, 2013 at 5:01 pm

I have read your previous comments about where the uploaded files go, but I am still confused. can you give me an example of a directory that I can change for the files to go there? I tried changing the script to
$sFileName = $_FILES[‘http://coolf2a.com/uploaded’][‘name’]
$sFileType = $_FILES[‘http://coolf2a.com/uploaded’][‘type’]
$sFileSize = bytesToSize1024($_FILES[‘http://coolf2a.com/uploaded’][‘size’], 1)
I also created a uploaded folder in my server.
Thanks

Reply
- admin Mar 31, 2013 at 11:35 am
  
  Hello Edik,
  Just use this: http://php.net/manual/en/function.move-uploaded-file.php
  
  Reply
TJ Mar 26, 2013 at 7:42 pm

It would be most sensible and save over half the comments here to just complete the code with example path to save. It would probably take less writing on your part to edit the post than continually answer how simple it is. – simple when you know how. – otherwise great tut, thanks

Reply
Gennadiy Apr 8, 2013 at 4:51 pm

Thanks for nice solution, bat ja script dont have coopirate. Please mail me is it possible, like name, mail, autor, etc.

Reply
- admin Jun 30, 2013 at 7:38 am
  
  Hi Gennadiy, what do you mean? Copyright info? If so – please refer to https://script-tutorials.com/terms-of-use/
  
  Reply
Joe Apr 21, 2013 at 4:26 pm

Hi,
i uploaded the script to my webspace. When i upload a file it says “successfully uploaded file..:” but i cant find it in the folder? Where will the file be uploaded?

Reply
- admin Jun 30, 2013 at 7:39 am
  
  Hi Joe, all the uploaded files should be in the folder where you dropped them. I don’t know where exactly you uploaded it.
  
  Reply
Joe Apr 21, 2013 at 4:37 pm

I modified the uploads.php like you mentioned, but it does not work:

<?php

function bytesToSize1024($bytes, $precision = 2) {
$unit = array('B','KB','MB');
return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

$sFileName = $_FILES['image_file']['name'];
$sFileType = $_FILES['image_file']['type'];
$sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);

echo <<<EOF
Your file: {$sFileName} wurde hochgeladen JONGE!
Type: {$sFileType}
Size: {$sFileSize}
EOF;

/////////////////////// CONFIGURATION OF FILE FOLDER
$uploads_dir = ‘/uploads’;
foreach ($_FILES[‘image_file’][‘type’] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES[“pictures”][“tmp_name”][$key];
$name = $_FILES[“pictures”][“name”][$key];
move_uploaded_file($tmp_name, “$uploads_dir/$name”);
}
}
?>

Reply
- admin Jun 30, 2013 at 7:46 am
  
  Hello Joe, your code has few mistakes. Pay attention, that in the beginning you used the correct variable: $_FILES[‘image_file’]
  but, why did you change you plans after, you you started using $_FILES[‘pictures’] ?
  Actually, you could use the already defined
  $sFileName = $_FILES[‘image_file’][‘name’];
  for ‘move_uploaded_file’ function, for instance:
  move_uploaded_file($sFileName, ‘uploads/new_file’);
  
  Reply
Andrey Apr 28, 2014 at 2:52 am

Hi Jos,
$_FILES[‘image_file’][‘type’] is not array, you don’t need to ‘foreach’ it. Better- if you use ‘IF’ statement instead
remus Apr 26, 2013 at 9:22 pm

Hi everyone,
i wonder if you could help me make the uploader to display the picture in it’s page after uploading is finished ,i must say i’m not very experienced.Thanx.

$(‘#submit_form’)click(function(){
$.ajax({
type: ‘POST’,
url: path/phpfile.php,
data: image_input_name
});

//after submitting, get the url of the image form the server

$(‘#div_to_display_image’).html(“”);

});

Reply
- admin Jun 30, 2013 at 7:48 am
  
  Hello Remus, what if you use the ‘uploadFinish’ function instead?
  
  Reply
Vinc May 9, 2013 at 7:03 pm

To help many of you, here is what I simply needed to put in the PHP file for the upload to work:

move_uploaded_file($_FILES[‘image_file’][‘tmp_name’], $_FILES[“image_file”][“name”]);

Simply put this new line before the line saying ECHO <<EOF.
It will let the file to upload itself in the same directory as the directory where your htm and php files are, if same. And you also need to ensure that your directory is 777 regarding the permissions.
Also check that your PHP.ini says ON to file uploads.

Reply
- admin Jun 30, 2013 at 7:52 am
  
  Hello Vinc, yes, sure, your directory should be writable (777), and, just remember, that when we copy or move something, firstly – we define a place ‘From’. As you already noticed, this is our uploaded image: $_FILES[‘image_file’][‘tmp_name’], but the second param is ‘To’ – a place to put this image, it can be a certain path on your server (but not the same image: $_FILES[‘image_file’][‘tmp_name’]).
  
  Reply
admin Oct 16, 2013 at 8:52 am

Hi Laith,
What path exactly?
nami May 20, 2013 at 2:14 pm

Hey admin nice work

If i want to change the color of the image id=preview how ?

Reply
- admin Jun 30, 2013 at 7:54 am
  
  Hi Nami, I suppose that you are talking about #preview {background-color:#fff}
  This is in our css/main.css
  
  Reply
Israel May 25, 2013 at 6:34 am

Great article! This worked well in desktop’s devices, but do not worked in mobile’s device. Do you know how can i make this upload’s system work with mobile (android and/or ios)?

Reply
- admin Jun 30, 2013 at 7:56 am
  
  Hi Israel, why doesn’t it work for mobile browsers? Did you get any errors or it hung?
  
  Reply
admin Oct 16, 2013 at 8:50 am

Hello George,
Yes, of course you can not upload ANY files. Do not forget about custom restrictions which we added into our code.
ben Jul 14, 2013 at 3:32 am

great look and feel for your upload form..

Question: How do I change file type to doc,docx,pdf,txt and also how to get the files emailed to a specified email address ??

Thanks

Reply
- admin Oct 16, 2013 at 8:59 am
  
  Hi Ben,
  You can use any available mime types:
  .doc application/msword
  .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
  .pdf application/pdf
  .txt text/plain
  .html text/html
  
  Reply
Anny Jul 26, 2013 at 2:04 pm

Everytime i try to upload.

I get error

An error occurred while uploading the file

Please help me on this.

I have apc install and everything works fine Just it doesnt upload.

Thanks

Reply
- admin Oct 16, 2013 at 8:54 am
  
  Hi Anny,
  This errors may appear in case of some troubles during upload (for example – lost connection)
  
  Reply
benoit Jul 30, 2013 at 8:02 pm

Hi,

the upload.php file is going ok width my parameters (the uploaded files are going in the correct file) BUT
I want to redirect my user on another page and it redirect him in a frame on the same (base) page.
Any advice ? Oo

Regards
Benoît

Reply
- admin Oct 16, 2013 at 8:54 am
  
  Hello Benoit,
  You can redirect members in case of successful upload right inside of uploadFinish (JS) function.
  
  Reply
Vaibhav K Aug 14, 2013 at 1:02 pm

Im getting error msg is that…
.
An error occurred while uploading the file

Reply
- admin Oct 16, 2013 at 8:51 am
  
  Hi Vaibhav,
  This errors may appear in case of some troubles during upload (for example – lost connection)
  
  Reply
Patrick Aug 26, 2013 at 3:10 pm

can you up load images from a MySQL database with this and deploy them into a gallery or divs?

Reply
- admin Oct 16, 2013 at 8:48 am
  
  Hello Patrick,
  Yes, this is possible. But this is already a part of our other tutorials
  
  Reply
rajeev kumar Oct 5, 2013 at 6:15 am

Great post. It helped me a lot.
I am facing one problem .
Its taking more time to select file and showing file attributes such as filename,filetype etc , especially for large file in GB. i have removed file type restriction and tried with video file. sometimes browser gets corrupted or taking very long time to show file attributes. I think its depend on the memory. any suggestion to solve this. please guide me.

Reply
- admin Oct 16, 2013 at 8:46 am
  
  Hi Rajeev,
  To tell the truth, I have no idea why it so. Do you load video files as images (our image with id=preview) ?
  
  Reply
Wouter Oct 10, 2013 at 9:24 am

This thing works like a charm (including FF for Android [rest not tested]), but I found 1 small thing:
If you select a file and click the select file again and select cancel there will not be a file selected, but in the preview there is.
I fixed this by moving
// get preview element
var oImage = document.getElementById(‘preview’);
to just after the opening of de function
fileSelected
and adding this line
oImage.src = ”;
to the hide warnings part.
This clears the preview showing that you can not upload a file.

Besides this minor inconvenience this thing works like a charm.

P.S. You might want to put ‘max-width: 720px;’ in the CSS for the textarea’s of this site, the new resize functionality of browsers breaks the page.

Reply
- admin Oct 16, 2013 at 8:42 am
  
  Hello Wouter,
  In general, when we click the ‘cancel’ button, it will not call the onchange event handler (fileSelected function). But thank you for your other valuable remarks.
  
  Reply
Brian Bak Oct 16, 2013 at 6:44 am

Wow. Super easy to use and it works. Greate tutorial! :D Thanx a lot!

Reply
Sasch Nov 22, 2013 at 2:28 am

Very Good Script Thank you :)

I have a question. i want to have 3 Uploads in one index. Is it possible?

Kind Regards :)

Reply
- Andrey Dec 23, 2013 at 5:31 am
  
  Hi Sasch,
  There is no reason to limit your imagination. Yes, of course you can have any desired amount of uploads at your index page. You just need to modify the script in accordance with the new forms.
  
  Reply
Dom Dec 10, 2013 at 1:23 am

The code says its completed the transfer, even though no upload file was selected, anyway to change this to force user to select a file?

Reply
- Andrey Dec 23, 2013 at 5:36 am
  
  Hi Dom,
  I can advise to check whether the file fits all the requirements before calling the ‘startUploading’ function. For instance, define a new variable (var bCanSubmit = false), and after, assign the ‘true’ in case if a file is selected and valid (in ‘fileSelected’ function). And finally, add a check for this variable into the ‘startUploading’ function
  
  Reply
Dennis Jan 17, 2014 at 3:05 pm

hello!

What all I need to write in .php file to make this working?

Reply
- Andrey Mar 6, 2014 at 1:06 pm
  
  Hi Dennis,
  What do you mean? How to upload a file?
  
  Reply
suhaphy Jan 23, 2014 at 3:45 am

Hello Andrey,thanks for your demos. it helps me a lot. But i have a question, why i can’t use it in the mobile? i mean that i cant upload the images in my mobile. Can you help me?

Reply
- Andrey Mar 6, 2014 at 1:09 pm
  
  Hi Suhaphy,
  Doesn’t it work at mobile devices? Have you already tried? Was your question about uploading files onto mobile phone?
  
  Reply
sailendra Jan 31, 2014 at 7:03 am

Excellent code very Use full……! Thank you……….

Reply
Harry Feb 28, 2014 at 12:13 am

hy,
great script.
I need help with the upload.
The pic was not uploaded in the uploads dir.
So i missed a function with the uploaddir path.
Can you help me?
thx

Reply
- Andrey Mar 6, 2014 at 1:10 pm
  
  Hi Harry,
  Is the file uploading process difficult for you? Should we make a tutorial how to upload files?
  
  Reply
Michael Feb 28, 2014 at 2:14 pm

Master! i will try to use your code, but, i get a message:

“alerta de seguridad el archivo que intenta subir ha sido rechazado”

i need to pay for use?? or is a fre code?

Reply
- Andrey Mar 6, 2014 at 1:14 pm
  
  Michael, we don’t charge for using of our codes. Can you translate this your message?
  
  Reply
Flemming From Mar 11, 2014 at 9:29 pm

Hi.

Is it possibel to set the directory for the file browser when the user press the select file button.

I need alwas to start in c:\filetoupload\images\custinfo\4711

thx

Reply
- Andrey Apr 28, 2014 at 2:48 am
  
  Hi Flemming,
  Hmm, I am not sure if this is possible, because only the browser saves this information (every time you select a file)
  
  Reply
sandeep Mar 14, 2014 at 6:44 am

I have uploaded few files in the https://script-tutorials.com/demos/199/index.html and Can I see those files in the https://script-tutorials.com/ and get the handle of them?

rgds,
Sandeep.k

Reply
- Andrey Apr 28, 2014 at 2:50 am
  
  Hi Sandeep,
  Can you please explain what you mean?
  
  Reply
jacky Mar 21, 2014 at 5:38 pm

hello admin,thanks a lot for your script! I want to your help ,how I change for jsp?and How i know where the upload file in my server’s path ?

Reply
- Andrey Apr 28, 2014 at 2:51 am
  
  Hi Jacky,
  Mostly, it depends only on you. Only you can decide where you need to save the sources.
  
  Reply
Sidney Apr 16, 2014 at 6:21 am

Great script.. Thank you.. I\’ve done lots of testing on the file uploader and I have used with your other facebook like gallery… Works just fine… In your js file for the uploader you defined the acceptable file formats, when you select a different file format it gives you a message to use a correct file format but if you hit upload the file will be uploaded…. Is it necessary to set some acceptable file extensions in upload.php or what would you recommend …

Reply
- Andrey Apr 28, 2014 at 2:55 am
  
  Hi Sidney,
  Yes, I agree, for the better protection, you may add this verification into the upload.php file. If you upload images, you can use ‘getimagesize’ function to get info about images, or, you can rely on the file extension.
  
  Reply
wyne Apr 19, 2014 at 8:04 am

seems it has problem to obtain the mime type when using android… cannot see the uploaded image in the demo

Reply
- Andrey Apr 28, 2014 at 2:56 am
  
  Hi Wyne,
  Our demo doesn’t save the uploaded files, check the upload.php file to understand how it works.
  
  Reply
Milton May 21, 2014 at 11:53 pm

Hi i cpied and paste the srcipts above, but when I opened the html page on Internet Explorer it doesn’t anything, I obtain an error on page.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Wed, 21 May 2014 23:53:29 UTC

Message: ‘document.getElementById(…).files.0’ is null or not an object
Line: 38
Char: 5
Code: 0
URI: http://localhost/Convencion/js/script.js

Pls your help.

Reply
- Andrey Jul 30, 2014 at 5:53 am
  
  Hi Milton, try to upgrade your IE
  
  Reply