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

我想在上传前预览图片。它在桌面上运行良好，但当我想在手机上预览图像时，它会自动旋转图像。例如，即使我的图像是垂直的，它也会使图像水平。另一个问题是，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!");
        }
    }

});

$（“#上传照片”）.on（'change'，function（）{
var$this=$（this）；
var countOfFiles=$this[0]。files.length；
var maxSize=countOfFiles*5242880；
如果（$this[0]。文件[0]。大小>最大大小）
{
美元小盒({
标题：“太大”，
颜色：#c69120“，
iconSmall：“fa警告fa-2x fadeInRight动画”，
超时：9000
});
$（'#上传照片'）.val（''）；
}
其他的
{
var url=（url | | webkit）.createObjectURL（$this[0].files[0]）；
var sonDiv=“”；
var files=$this[0]。文件；
var imgPath=$this[0]。值；
var extn=imgPath.substring（imgPath.lastIndexOf（'.'）+1.toLowerCase（）；
var image#u holder=$（“#image holder”）；
图像_holder.empty（）；
如果（extn==“gif”| | extn==“png”| | extn==“jpg”| | extn==“jpeg”）{
对于（var i=0；i

这是我的发帖方法：

  $("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;
});

$（“form#formPost”）.submit（函数（事件）{
var-bad=0；
var$this=$（this）；
var$currentItem；
var items=$（“#formPost:input”）；
对于（变量i=0，j=items.length；i1）
{
每个（旋转值，函数（键，值）{
formData.append（value.filename，value.rotate）；
});
$.ajax({
url:“/Group/Post”，
键入：“POST”，
数据：formData，
async:true，
cache:false，
contentType:false，
processData:false，
成功：函数（返回数据）{
存储照片=[]；
storedFiles=[]；
rotateValue=[]；
旋转值=0；
pageSize=pageSize+1；
$（“#图像支架”）.empty（）；
$（“#文件持有者”）.empty（）；
$（'#Message'）.val（''）；
$（'#上传照片'）.val（''）；
$（'#uploadFile'）.val（''）；
},
错误：函数（ex）{
美元小盒({
标题：“错误”，
颜色：#c46a69“，
iconSmall：“fa-2x fadeInRight动画”，
超时：4000
});
}
});
}
返回false；
});

移动设备对于web来说是不好的设备，因此您无法加快上传速度，但是您可以尝试反转处理文件上传的过程，但移动设备上的旋转问题又如何呢？我怎样才能解决它@如果您尝试先向用户显示预览，然后将文件上载到服务器，也可以作为附加说明使用stock jQuery代码OK尝试使用stock jQuery代码而不是插件