Jquery 文件上传大小

最新推荐文章于 2021-06-09 19:35:47 发布

m0_37346206

最新推荐文章于 2021-06-09 19:35:47 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/m0_37346206/article/details/108124492

版权

<html>
<head>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/>
<input id="fUpload" multiple type="file"/>
<ul id="ulList"></ul>
<input id="btnShow" type="button" value="Show"/><br/>
<script>
$(document).ready(function(){
$("#btnShow").on('click', function () {
$("#ulList").empty();
var fp = $("#fUpload");
var lg = fp[0]
.files.length; 
var items = fp[0].files;
var fragment = "";
if (lg > 0) {
for (var i = 0; i < lg; i++) {
var fileName = items[i].name; //获得文件名
var fileSize = items[i].size; //获得文件大小 
var fileType = items[i].type; //获得文件类型
//在UL标签显示文件信息
fragment += "<li>" + fileName + " " + fileSize + " bytes. Type :" + fileType + "</li>";
}
$("#ulList").append(fragment);
}
});
});
</script>
</body>
</html>

通过jquery控制上传文件的格式、大小；当选择图片时，能在页面上提供图片预览的功能。
$("#picture").change(function () {
    var s = $('#picture').val();
    var start = s.indexOf(".") + 1;
    var name = s.substring(start, s.length).toLowerCase();
    if (name != "jpg" && name != "png" && name != "gif") {
        alert("图片格式必须为jpg、png、gif中的一种");
        $("[value='上传']").attr("disabled", true);
        return;
    }
    if (this.files[0].size / 1024 / 1024 > 5) {
        alert("图片不能超过5M");
        $("[value='上传']").attr("disabled", true);
        return;
    }
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
        $("#img0").attr("src", objUrl);
    }
    $("[value='上传']").attr("disabled", false);
});
 
//获得file按钮选取文件的路径
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

m0_37346206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 文件上传大小

<html><head></head><body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><br/><input id="fUpload" multiple type="file"/><ul id="ulList"></ul><input id="btnS.
复制链接

扫一扫