[英]How to validate a file upload field using Javascript/jquery
如何驗證用戶是否選擇了要上傳的文件？
編輯：撞了
檢查它的value屬性：
在 jQuery 中（因為你的標簽提到了它）：
$('#fileInput').val()
或者在原生 JavaScript 中：
document.getElementById('myFileInput').value
我的功能將檢查用戶是否選擇了該文件，您還可以檢查是否要允許該文件擴展名。
嘗試這個：
<input type="file" name="fileUpload" onchange="validate_fileupload(this.value);">
function validate_fileupload(fileName)
{
var allowed_extensions = new Array("jpg","png","gif");
var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.
for(var i = 0; i <= allowed_extensions.length; i++)
{
if(allowed_extensions[i]==file_extension)
{
return true; // valid file extension
}
}
return false;
}
此代碼基於 Ravinders 解決方案構建，可停止提交表單。 在服務器端檢查擴展也可能是明智的。 所以你不會讓黑客上傳他們想要的任何東西。
<script>
var valid = false;
function validate_fileupload(input_element)
{
var el = document.getElementById("feedback");
var fileName = input_element.value;
var allowed_extensions = new Array("jpg","png","gif");
var file_extension = fileName.split('.').pop();
for(var i = 0; i < allowed_extensions.length; i++)
{
if(allowed_extensions[i]==file_extension)
{
valid = true; // valid file extension
el.innerHTML = "";
return;
}
}
el.innerHTML="Invalid file";
valid = false;
}
function valid_form()
{
return valid;
}
</script>
<div id="feedback" style="color: red;"></div>
<form method="post" action="/image" enctype="multipart/form-data">
<input type="file" name="fileName" accept=".jpg,.png,.bmp" onchange="validate_fileupload(this);"/>
<input id="uploadsubmit" type="submit" value="UPLOAD IMAGE" onclick="return valid_form();"/>
</form>
至少在 Firefox 中，DOM 檢查器告訴我 File 輸入元素有一個名為files的屬性。 你應該能夠檢查它的長度。
document.getElementById('myFileInput').files.length
我從某個論壇得到了這個。 我希望它對你有用。
<script type="text/javascript">
function validateFileExtension(fld) {
if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)) {
alert("Invalid image file type.");
fld.form.reset();
fld.focus();
return false;
}
return true;
} </script> </head>
<body> <form ...etc... onsubmit="return
validateFileExtension(this.fileField)"> <p> <input type="file"
name="fileField" onchange="return validateFileExtension(this)">
<input type="submit" value="Submit"> </p> </form> </body>
簡單而強大的方式（動態驗證）
將格式放入數組中，例如“image/*”
var upload=document.getElementById("upload"); var array=["video/mp4","image/png"]; upload.accept=array; upload.addEventListener("change",()=>{ console.log(upload.value) })
<input type="file" id="upload" >
如何使用 Javascript/google App 腳本驗證文件上傳字段
[英]How to validate a file upload field using Javascript/ google App script
如何使用JavaScript在struts2中使文件上傳字段為空？
[英]How to make a file upload field empty in struts2 using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.