-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathimg.html
131 lines (120 loc) · 4.96 KB
/
img.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="ai-item upload-id-img">
<p>上传身份证照片</p>
<div class="img-box">
<div class="positive-img">
<input type="file" id="img1" name="zm" class="inputFile">
<label for="img1">
<img src="http://pic.biyabi.com/h5/images/fm-img.png" id="preview">
</label>
</div>
<div class="opposite-img">
<input type="file" id="img2" name="fm" class="inputFile">
<label for="img2">
<img src="http://pic.biyabi.com/h5/images/zm-img.png" id="preview2">
</label>
</div>
</div>
</div>
</body>
<script>
//编辑页面上传图片
$('#img1').on('change', function () {
setImgPreview('img1', 'preview');
});
//上传图片
function setImgPreview(imgObj, prev) {
var docObj = $("#" + imgObj);
var imgObjPreview = $("#" + prev);
//异步上传图片
uploadImage(docObj, imgObjPreview)
}
function uploadImage(docObj, imgObjPreview) {
//判断是否有选择上传文件
var imgPath = docObj.val();
if (imgPath == "") {
//alert("请选择上传图片！");
hDialog.show({ type: 'toast', toastText: '请选择上传图片！', toastTime: 3000, hasMask: false });
return;
}
//判断上传文件的后缀名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
//alert("请选择图片文件！");
hDialog.show({ type: 'toast', toastText: '请选择图片文件！', toastTime: 3000, hasMask: false });
return;
}
var ImgObj = new Image(); //建立一个图像对象
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）
ImgObj.src = docObj[0].value;
//checkSizeofImg();
//function checkSizeofImg() {
// if (ImgObj.readyState != "complete") { //如果图像是未加载完成进行循环检测
// setTimeout("checkSizeofImg()", 500);
// //return false;
// }
//}
//ImgObj.onload = function () {
// ImgFileSize = Math.round(ImgObj.fileSize / 1024 * 100) / 100;//取得图片文件的大小
// if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) {
// hDialog.show({ type: 'toast', toastText: '上传失败，请上传不大于2M的图片！', toastTime: 3000, hasMask: false });
// return;
// }
//}
//var file = $("#" + imgObj).files[0];
var reader = new FileReader();
var file = docObj[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var result = document.getElementById("result");
var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;
if (AllowImgFileSize != 0 && AllowImgFileSize < ImgFileSize) {
hDialog.show({ type: 'toast', toastText: '上传失败，请上传不大于2M的图片！', toastTime: 3000, hasMask: false });
return;
}
//显示文件
imgObjPreview.attr("src", reader.result);
//字符串形式上传 //data:image/png;base64,
var imgDataBase64 = imgObjPreview.attr("src").substring(imgObjPreview.attr("src").indexOf(",") + 1);
$.ajax({
type: 'post',
dataType: 'json',
data: { "_Image": imgDataBase64, "_format": "." + strExtension },
url: ajaxUrl + 'UploadIDCartImageBase64',
success: function (data) {
if (data) {
imgObjPreview.attr("src", data);
$("." + docObj.attr("name")).val(data);
docObj.parent().find('.logo-img2').remove();
}
},
//此接口返回的图片路径是error的响应文本
error: function (xhr) {
imgObjPreview.attr("src", xhr.responseText);
$("." + docObj.attr("name")).val(xhr.responseText);
docObj.parent().find('.logo-img2').remove();
},
beforeSend: function () {
var logoImg = '<img src="../images/loanding.gif" class="logo-img2" style="position: absolute;left: 50%;top: 50%;width: 20px; height: 20px; -webkit-transform: translate(-50%,-50%);">';
docObj.parent().append(logoImg);
}
});
}
reader.onerror = function () {
alert("error");
}
}
}
</script>
</html>