Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Is there a way to upload a file without reloading the page and without using JS?

user-image
Question added by Mohammad Ateieh , Software Engineering Manager , Bayt.com
Date Posted: 2013/08/29
Khadijah Shtayat
by Khadijah Shtayat , Technical Lead , Opensooq

You cannot do Ajax file uploads. They're not supported.May HTML5 support this I am not sure.

 I recommend using the Fine Uploader plugin.You can use also

Ahmed Ismael
by Ahmed Ismael , L2 Technical support & MIS Team Leader , Abu Dhabi Media Team

you can use HTML5 upload process for that particular step, or set your upload page target to blank page (Pop-up) to avoid full page reload.

Daanish Rumani
by Daanish Rumani , Product Manager , Publicis Sapient

You have to have some way to execute code.
If you do not want JavaScript then you may explore Flash, Siverlight, or Java Applets.

Feras Abualrub
by Feras Abualrub , Web Solutions Manager , Qistas for Information Technology

HTML5 , otherwise go with AJAX (which you dont want to)!!

You can use hidden iframe and make form target to that.

Louy Alakkad
by Louy Alakkad , Front End Developer , Alpha Apps

var AjaxFileUploader = function () {

    this._file = null;

    var self = this;

 

    this.uploadFile = function (uploadUrl, file) {

        var xhr = new XMLHttpRequest();

        xhr.onprogress = function (e) {

            ...

        };

 

        xhr.onload = function (e) {

            ...

        };

 

        xhr.onerror = function (e) {

            ...

        };

 

        xhr.open("post", uploadUrl, true);

 

        xhr.setRequestHeader("Content-Type", "multipart/form-data");

        xhr.setRequestHeader("X-File-Name", file.name);

        xhr.setRequestHeader("X-File-Size", file.size);

        xhr.setRequestHeader("X-File-Type", file.type);

 

        xhr.send(file);

    };

};

 

AjaxFileUploader.IsAsyncFileUploadSupported = function () {

    return typeof (new XMLHttpRequest().upload) !== 'undefined';

}

 

 if (AjaxFileUploader.IsAsyncFileUploadSupported) {

        ajaxFileUploader = new AjaxFileUploader();

 

        $("form").submit(function () {

            var uploader = $("#fileUploader")[0];

 

            if (uploader.files.length ==0) {

                return;

            } else {

                ajaxFileUploader.uploadFile(

                    "/YourUploadUrl",

                    uploader.files[0]);

            }

 

            return false;

        });

    }

 

source: http://stackoverflow.com/questions//ajax-file-upload-form-submit-without-jquery-or-iframes

Nouphal Muhammed
by Nouphal Muhammed , Senior Web Developer , Planet Green Solutions

You said with out reloading. if that is the case then a normal submit button would do the job. If that is not the intended question, then as Mr.Daanish Rumani had said you can use flash or some other alternative. But in the end a http request header has to be generated for communicating with the server. 

Mo'ath Al Mallahi
by Mo'ath Al Mallahi , Senior PHP Developer , iHorizons

read about uploading using iframe.

More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.