1

Digital camera photos are often saved as JPEG with an EXIF "orientation" tag. To display correctly, images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image.

I want after upload image, before send image for php it fix orientation (rotate/mirror the image on the client side so that it displays correctly) image auto, what's the solution? how is it in my code?

HTML:

<input type="file" name="files[]" id="fileElem" multiple="multiple" accept="image/*" onchange="handle_Files(this.files)">

JS:

function handle_Files(files) {
    var d = document.getElementById("fileList");
    var formData = new FormData($('.EditUserInfo')[0]);
    $.ajax({
        url: 'insert_image',
        type: 'POST',
        dataType: 'json',
        maxNumberOfFiles: 1,
        autoUpload: false,
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                //myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr;
        },
        success: function(result) {
            console.log($.ajaxSettings.xhr().upload);
            var div = document.createElement("div");
            div.style.backgroundImage = 'url(' + window.URL.createObjectURL(files[0]) + ')';
            div.onload = function() {
                window.URL.revokeObjectURL(this.src);
            }
        }
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
}
user837032
  • 84
  • 2
  • 11

0 Answers0