在使用 Javascript / Asp.net 上传之前获取文件高度宽度答案

【问题标题】：Get file height width before uploading using Javascript / Asp.net在使用 Javascript / Asp.net 上传之前获取文件高度宽度
【发布时间】：2014-11-25 08:52:18
【问题描述】：

我的网络表单上有 Asp:FileUpload 控件。

在FileUpload控件的OnChange()事件上，JavaScript函数被执行

<asp:FileUpload ID="fUpload" runat="server" Style="visibility: hidden;width:1px" onchange="callme(this)"/>

Javascript函数：

function callme(oFile) {
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value;
    ReadImage(oFile.value);
}

ReadImage 函数应该读取文件并告诉所选文件的高度宽度和大小，如果文件不是图像，则显示错误消息。

function ReadImage(_file) 
{
    var reader = new FileReader();
    var image = new Image();


    image.src = 'file://' + _file;              
    image.onload = function() {

            alert('Step 2');

            var w = this.width,
                h = this.height,
                t = file.type,                           
                n = file.name,
                s = ~ ~(_file.size / 1024) + 'KB';


            alert('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
        };
        image.onerror= function() 
        {
            alert('Invalid file type: '+ _file.type);
        };

    }

ReadImage() 函数应该在上传到服务器之前读取所选文件并获取该文件的高度、宽度和大小。

这是怎么做到的？？我做错了什么。

【问题讨论】：

_file的值是多少？
用户机器上的任何本地文件路径...例如：“C:\Users\amit_shelke\Pictures\as.jpg”
你确定不是C:/fakepath/as.jpg？
是的。如果您尝试运行我的代码 oFile.value = "C:\Users\amit_shelke\Pictures\as.jpg"。
好的，您是否尝试在 src 之前设置 onload 并且您是否收到任何 JavaScript 错误？

标签： javascript asp.net

【解决方案1】：

function callme(oFile) 
{
    document.getElementById('<%=txtFilePath.ClientID%>').value = oFile.value;
    ReadImage(oFile);
}

function ReadImage(_file) {
    var fr = new FileReader;

    fr.onload = function () { // file is loaded
        var img = new Image;

        img.onload = function () {

            alert('Step 2');

            var w = img.width;
            var h = img.height;

            alert('<img src="' + fr.result + '"> ' + w + 'x' + h + '<br>'); // is the data URL because called with readAsDataURL
        };
        img.onerror = function () {
            alert('Invalid file type');
        };

       img.src = fr.result; // is the data URL because called with readAsDataURL

    };

    fr.readAsDataURL(_file.files[0]); // for using a <input type="file">
}

【讨论】：

您的解决方案无效。感谢您的尝试。 img.onload() 没有触发。
哦，我只是忘记放 img.src，现在试试我已经更新了我的代码。

【解决方案2】：

我的问题的其余部分 - “上传前获取文件大小”

使用这个 javascript

 function checkFile(fieldObj) {
    var FileName = fieldObj.value;
    var FileExt = FileName.substr(FileName.lastIndexOf('.') + 1);
    var FileSize = fieldObj.files[0].size;
    var FileSizeMB = (FileSize / 10485760).toFixed(2);


    if ((FileExt != "png" && FileExt != "doc" && FileExt != "bmp" && FileExt != "dib" && FileExt != "JPG" && FileExt != "jpeg" && FileExt != "jpe" && FileExt != "jfif" && FileExt != "gif" && FileExt != "tiff" && FileExt != "tif" && FileExt != "tga") || FileSize > 10485760) {
        var error = "File type : " + FileExt + "\n\n";
        error += "Size: " + FileSizeMB + " MB \n\n";
        error += "Please make sure your file is in pdf or doc format and less than 10 MB.\n\n";
        alert(error);
        return false;
    }
    return true;
}

【讨论】：

【解决方案3】：

你试过没有 image.src = 'file://' + _file;

var img = new Image;

img.onload = function() {
    alert(img.width);
    alert(img.height);
};
img.onerror = function() {
    alert("error");
};
img.src = oFile.value;

【讨论】：

是的，已经按照您的建议进行了尝试，但没有奏效。实际上 Alert(img.width) 应该给我确切的值，但事实并非如此。原因可能是我可能需要创建 Filereader 类的对象并将其传递给 Image 类，然后您的代码才能工作，但我是 javascript 新手，所以找不到我需要编写的确切代码。
我已经发布了另一个答案，我已经对 callme 和 ReadImage 函数进行了更改，它现在应该可以工作了。