javascript限制上传文件大小

最新推荐文章于 2024-08-17 21:49:37 发布

kcyuan

最新推荐文章于 2024-08-17 21:49:37 发布

阅读量34

点赞数

本文链接：https://blog.csdn.net/eryunyong/article/details/133066606

版权

在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小(字节数)使用的 api是FileReader，不多说了，看例子吧。

<html>

<head>
<title>test</title>
<script language="JavaScript">


function importPrompt()
{
    var tipMsg = "browser version too low, suggest you to upgrade or try other browsers!";
    var errMsg = "import file size is greater than 250kb!";

    if (!window.FileReader)
    {
        alert(tipMsg);
        return false;
    }

    var oFile = document.getElementById("fileupload").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");

    var fileSize = 0;
    var maxsize = 250*1024;//250kb
    var reader = new FileReader();
    reader.onload = function (e)
    {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.
    };
    reader.readAsDataURL(oFile );
    fileSize = oFile.size;
    
    if(fileSize>maxsize)
    {
        alert(errMsg);
        return false;
    }
    else
    {
        return confirm("select yes to upload");
    }
}

</script>
</head>

<body>

<img id="imgtag" dynsrc="" src="" style="display:none" />

<form action='#' onsubmit="return importPrompt();">
<input type="file" name="ImportFile" id="fileupload" >
<input type="submit" id="button" value="restor">
</form>


</body>

</html>

请一定要去看下面的参考资料，你会受益更多

reference:

http://caniuse.com/filereader http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api http://www.micmiu.com/lang/javascript/js-check-filesize/

http://stackoverflow.com/questions/1606842/how-can-i-get-a-files-upload-size-using-simple-javascript

kcyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript限制上传文件大小

在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小(字节数)使用的 api是FileReader，不多说了，看例子吧。<html><head><title>test</title><script language...
复制链接

扫一扫