HTML 如下:
<input type="file" name="upImg">
<input type="text">
<div id="showImage">
<img src="" alt="">
</div>
JS如下:选择图片后,显示文件名,并预览图片
$(document).on('change', 'input[name="upImg"]', function (e) {
var fileName = this.files[0].name;
if (fileName != '' && fileName != undefined) {
var fileSize = 0;
var extStart = fileName.lastIndexOf(".");
var ext = fileName.substring(extStart, fileName.length).toUpperCase();
//判断是否符合格式要求
if (ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
alert("图片必须为png,gif,jpeg,jpg格式");
$(this).val('');
return false;
} else {
fileSize = this.files[0].size;
var size = (fileSize / 1024).toFixed(2);//单位转换:kb转M
//图片限制在20M以下
if (size > 20480) {
alert("图片大小不能超过20M");
$(this).val('');
return false;
} else {
var objUrl = getObjectURL(this.files[0]); //blob:http://localhost:63342/5765b9f5-f68c-47df-b043-ac8fbd74b04e
if (objUrl) {
$("#showImage img").attr("src", objUrl);
$(this).next("input").val(fileName);
var src = $("#showImage img").attr("src");
//图片加载后, 释放对象 URL
$("#showImage img").on('load', function (e) {
removeObjectURL(src);
});
}
}
}
}
});
将图像源设置为表示该文件的新对象 URL(blob url)
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;
}
释放通过URL.createObjectURL() 创建的 URL 对象。调用这个方法不会立即释放内存,只是让浏览器知道不用在内存中继续保留对这个文件的引用了,允许平台在合适的时机进行垃圾收集。
function removeObjectURL(src) {
if (window.revokeObjectURL != undefined) { // basic
window.revokeObjectURL(src);
} else if (window.URL != undefined) { // mozilla(firefox)
window.URL.revokeObjectURL(src);
} else if (window.webkitURL != undefined) { // webkit or chrome
window.webkitURL.revokeObjectURL(src);
}
}
页面如下:
用于在浏览器上预览本地图片或者视频
注意:
预览视频时,将window.URL.createObjectURL生成的URL,赋给video中的src标签,没有使用source标签。像腾讯,优酷都是这么做的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)