第一步、获取上传的图片
<td>
<input type="file"/>
<input type="button" onclick="postData(this);" value="上传"
style="width:50px;height:30px;"/>
<div>
<img class='proImg' alt="无图片" src='${p.img}' style='width:120px;height:120px;'/>
<input name="imgAward" type='hidden' value="${p.img}"/>
</div>
</td>
//--------------------上传图片--------------start
function postData(e)
{
//获取上传图片文件
let uploadPhoto = $(e).prev()[0].files[0];
//prev() 方法返回被选元素的前一个同级元素
if(uploadPhoto == null)
{
Feng.error('请选择图片');
return
}
//文件类型判断
var b = checkFileExt(uploadPhoto.name);
if(!b)
{
Feng.error('图片不合法');
return
}
//文件大小判断
var bSize = checkFileSize(uploadPhoto,'5MB');
if(!bSize)
{
Feng.error('图片大小不能超过5M');
return
}
var formData = new FormData();
formData.append("file", uploadPhoto);
$.ajax({
url: Feng.ctxPath+"/common/uploadImg", /*接口域名地址*/
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (res) {
if (res.code == "success") {
Feng.success('上传成功');
$(e).next().children().attr("src",res.url);
$(e).next().children().next().attr("value",res.url)
} else {
Feng.error('失败');
}
}
})
}
//--------------------上传图片--------------end
第二步、进行限制操作
/* 限制文件类型,返回 boolean
* */
function checkFileExt(filename)
{
var flag = false; //状态
var arr = ["gif","jpeg","jpg","png","bmp"];
//取出上传文件的扩展名
var index = filename.lastIndexOf(".");
var ext = filename.substr(index+1);
//循环比较
for(var i=0;i<arr.length;i++)
{
if(ext == arr[i])
{
flag = true; //一旦找到合适的,立即退出循环
break;
}
}
return flag;
}
/* 限制文件大小,返回 boolean
* file:文件对象
* limiteSize:限制大小---例如:"50MB"
* */
function checkFileSize(file, limitSize) {
var arr = ["KB", "MB", "GB"]
var limit = limitSize.toUpperCase();
var limitNum = 0;
for (var i = 0; i < arr.length; i++) {
var leval = limit.indexOf(arr[i]);
if (leval > -1) {
limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1))
break
}
}
console.info("上传文件的大小:"+file.size);
console.info("文件限制的大小:"+limitNum);
if (file.size > limitNum) {
return false
}
return true
}