我发现了一个js fiddle作为工作文件/图像上传验证进行演示。
我已将此脚本应用于我的表单,并收到以下错误
注意:我已经用丢失的分号更新了脚本(更新了js-fiddle),但我仍然收到以下错误:
TypeError: undefined is not an object (evaluating 'msg.innerHTML = "Upload ready..."')
错误将注意力引向以下行:
mime.match(RegExp(accepted, 'i')) ? size > max ? (input.form.reset(), msg.innerHTML = max + "KB Exceeded!") : msg.innerHTML = "Upload ready..." : (input.form.reset(), msg.innerHTML = accepted + " file type(s) only!");
一个问题是小提琴中的脚本包装器。
但另一个问题是type
,有时当使用未知的文件类型时,type
将是一个空字符串,而mimetype
将是未定义的,因此mime的值将变为undefined
。
一种解决方案是仅使用type
的mimetype
是undefined
mime = (typeof test.type == 'undefined'? test.mimeType:test.type);
另一个是检查mime
在类似的条件下是否有值
// Image/File validation on Client-side
function getImg(input, max, accepted) {
var upImg = new Image(),
test, size, msg = input.form;
msg = msg.elements[0].children[0];
return input.files ? validate() : (upImg.src = input.value, upImg.onerror = upImg.onload = validate);
function validate() {
test = (input.files ? input.files[0] : upImg);
size = (test.size || test.fileSize) / 1024;
mime = (test.type || test.mimeType);
mime && mime.match(RegExp(accepted, 'i')) ? size > max ? (input.form.reset(), msg.innerHTML = max + "KB Exceeded!") : msg.innerHTML = "Upload ready..." : (input.form.reset(), msg.innerHTML = accepted + " file type(s) only!");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Image upload</legend>
<input type="file" onchange="getImg(this,11,'jpeg|jpg|png|gif')" />
</fieldset>
</form>