在手机上传之前的jquery图片预览

Question

我想在上传之前预览图像。它在桌面上工作正常但是当我想在移动设备上预览图像时，它会自动旋转图像。例如，即使我的图像是垂直的，它也会使图像水平。另一个问题是，post方法在移动设备上太慢了。我需要帮助。对不起我的英语不好。感谢

以下是我预览图片的代码：

$("#uploadPhoto").on('change', function () {
    var $this = $(this);
    var countOfFiles = $this[0].files.length;
    var maxSize = countOfFiles * 5242880;
    if($this[0].files[0].size > maxSize)
    {
        $.smallBox({
            title : "Too large",
            color : "#c69120",
            iconSmall : "fa fa-warning fa-2x fadeInRight animated",
            timeout : 9000
        });
        $('#uploadPhoto').val('');
    }
    else
    {
        var url = (URL || webkit).createObjectURL($this[0].files[0]);
        var sonDiv="";
        var files = $this[0].files;
        var imgPath = $this[0].value;
        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        var image_holder = $("#image-holder");
        image_holder.empty();
        if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            for (var i = 0; i < countOfFiles; i++)
            {
                var url = (URL || webkit).createObjectURL($this[0].files[i]);
                var f = files[i];
                storedPhotos.push(f);
                rotateValues.push({
                    filename:f.name,
                    rotate:0
                });

                var spanDiv = "<div class='col-md-3 col-lg-3 col-sm-4 col-xs-6 no-padding tempFile'><span data-id='" + f.name + "' data-value='0' class='close rotate pull-left'><i class='fa fa-repeat'></i></span><span class='close closethis'><i class='fa fa-times'></i></span>";
                var imageDiv = "<img class='img-responsive ' data-id='" + f.name + "' src='" + url + "'/></div>";
                sonDiv += spanDiv + imageDiv +'</div>';
            }
            $(sonDiv).appendTo(image_holder);
            sonDiv="";
        } else {
            alert("Only Image Files!");
        }
    }

});

这是我的帖子方法：

  $("form#formPost").submit(function (event) {
    var bad=0;
    var $this = $(this);
    var $currentItem;
    var items = $('#formPost :input');
    for (var i = 0, j = items.length; i < j; i++) {
        $currentItem = $(items[i]);
        if( $.trim($currentItem.val()) != "" )
            bad++;

    }

    event.preventDefault();
    var formData = new FormData($this[0]);
    for (var i = 0; i < storedPhotos.length; i++) {
        formData.append('uploadPhoto2', storedPhotos[i]);
        bad++;
    }

    for (var i = 0; i < storedFiles.length; i++) {
        formData.append('uploadFile2', storedFiles[i]);
        bad++;
    }


    if (bad> 1)
    {

        jQuery.each(rotateValues, function(key, value) {
            formData.append(value.filename, value.rotate);
        });
        $.ajax({
            url: '/Group/Post',
            type: 'POST',
            data:formData,
                async: true,
                cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                storedPhotos = [];
                storedFiles = [];
                rotateValues=[];
                rotateValue =0;
                pageSize = pageSize+1;
                $('#image-holder').empty();
                $('#file-holder').empty();
                $('#Message').val('');
                $('#uploadPhoto').val('');
                $('#uploadFile').val('');

            },
            error: function (ex) {
                $.smallBox({
                    title : "Error",
                    color : "#c46a69",
                    iconSmall : "fa fa-close fa-2x fadeInRight animated",
                    timeout : 4000
                });
            }
        });
    }

    return false;
});