Javascript 如何将这两个按钮设为一个，并在禁用时旋转（假定我已正确执行此操作）

下面有两个按钮。一种是在中添加一个图像，并在该图像上方使用另一个图像进行查看。另一个按钮检查图像的分辨率。我想只有一个按钮，执行这两个功能，但似乎不能让它读取图像分辨率检查功能，当你上传图像

另一件我似乎无法解决的事情是，当上传一些肖像图像时，它们是水平显示的，而不是垂直显示的

在寻求任何帮助之前，我在过去几天里一直在努力想办法解决这些问题，但到了这个地步，我想不出任何其他可行的办法

（非常感谢您的帮助！）

第一个按钮代码：

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <br>
    <img id="blah" src="" alt="Upload Image" />

     <img id="blah2" src="" alt="Upload Image" />

     <img id="grooved" src="http://vignette1.wikia.nocookie.net/elderscrolls/images/e/ec/Ok-icon.png/revision/latest?cb=20120124042116" alt="your image" height="100" />
</form>

Css:

第二个按钮：

HTML:

---

您可以在readUrl（）函数中调用isGoodImage：

它是这样工作的。 拨弄-

关于正在上传的肖像图像，您需要检查“EXIF信息”中的方向是否正确。它有时会被不同的图形编辑器破坏。

---

您可以使用这个“Exif Viewer online”

啊，对了！我现在明白了！这是有道理的！非常感谢。我忘了在上面的消息中说的一件事是，我不需要提交按钮，但如果图像好或不好，我仍然希望它显示一条消息，而不是链接到外部网页（如果图像好），但我也发现很难把我的听力包起来。。。。。有什么建议吗？再次感谢！很乐意帮忙：）关于表格。只需删除表单标签并将提交更改为按钮。然后将单击事件添加到该按钮并添加设计检查。你可以检查这把小提琴->。它的基础，从那里你可以删除错误信息，也许把成功的msg，只是玩它：）哇！这也奏效了！非常感谢。你帮了大忙！你没有意识到这实际上有多大帮助！

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });

    function readURL2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah2').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL2(this);
    });

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);

    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
    background-color: #555;
}

#blah {
 width:500px; 
  height:500px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
}

#blah2 {
 width:500px; 
  height:500px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
  position: absolute;
}

#grooved {
  position: absolute; left: 280px;
}

<form id="form" action="destination.html">
    <input type="file" id="filePicker" />
    <br/>
    <div id="noFileError" style="display:none;">
        <b>Please select a valid image file.</b>
    </div>
    <input type="submit" value="Submit" />
    <br/>
    <div id="imageValidationError" style="display:none;">
        <b>The image resolution is too low.</b>
    </div>
</form>

var _URL = window.URL || window.webkitURL;

function isSupportedBrowser() {
    return window.File && window.FileReader && window.FileList && window.Image;
}

function getSelectedFile() {
    var fileInput = document.getElementById("filePicker");
    var fileIsSelected = fileInput && fileInput.files && fileInput.files[0];
    if (fileIsSelected)
        return fileInput.files[0];
    else
        return false;
}

function isGoodImage(file) {
    var deferred = jQuery.Deferred();
    var image = new Image();

    image.onload = function() {
        // Check if image is bad/invalid
        if (this.width + this.height === 0) {
            this.onerror();
            return;
        }

        // Check the image resolution
        if (this.width >= 1191 && this.height >= 1191) {
            deferred.resolve(true);
        } else {
            $("#imageValidationError").show();
            deferred.resolve(false);
        }
    };

    image.onerror = function() {
        $("#noFileError").show();
        deferred.resolve(false);
    }

    image.src = _URL.createObjectURL(file);

    return deferred.promise();
}


$("#form").submit(function(event) {
    var form = this;

    if (isSupportedBrowser()) {
        event.preventDefault(); //Stop the submit for now

        var file = getSelectedFile();
        if (!file) {
            $("#noFileError").show();
            return;
        }

        isGoodImage(file).then(function(isGood) {
            if (isGood)
                form.submit();
        });
    }
});

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
            //Add this line, it will check the resoation and display if the image is bad
            isGoodImage(input.files[0]);
        }
    }