-
Notifications
You must be signed in to change notification settings - Fork 0
/
imagePreviewDemo.html
executable file
·51 lines (35 loc) · 1.59 KB
/
imagePreviewDemo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<img src="#" id="image-preview0" alt="Responsive image">
<input type="file" id="file-0" onchange="imagePreview(this)" >
<img src="#" id="image-preview1" alt="image-preview">
<input type="file" id="file-1" onchange="imagePreview(this)">
</body>
<script>
//图片上传预览
var num = 0;
ofr = new FileReader(); //获取H5的 FileReader对象
//正则表达式，用于过滤文件类型。
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
ofr.onload = function (oFREvent) {
//onload事件，用于文件加载完毕后显示图片的预览。
document.getElementById("image-preview"+num).src = oFREvent.target.result;
};
function imagePreview(obj) {
num = $(obj).attr("id").split("-")[1]; //分割id的后缀。
if (obj.files.length === 0) {
return;
}
var oFile = obj.files[0];
if (!rFilter.test(oFile.type)) {
alert("You must select a valid image file!");
return;
}
ofr.readAsDataURL(oFile);
}
</script>
</html>