<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;
}