[英]Display image and Validation of image extension before uploading file Using Javascript
我的目標是首先驗證上傳文件是一個圖像,如果它是一個圖像,我將顯示它。 我從Validation Code和Image Code獲得代碼。
起初我能夠顯示圖像。 但是,當我將顯示圖像代碼與驗證代碼結合使用時,我無法同時進行驗證和顯示。
誰能幫幫我嗎? 下面是我的代碼。 提前致謝! :)
<input type="file" name="dataFile" id="fileChooser" onchange="readURL(this);" />
<SCRIPT type="text/javascript">
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function readURL(input) {
var arrInputs = document.getElementById("fileChooser").value;
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
我能夠解決它。 下面是正確的代碼。 :)
JavaScript
<SCRIPT type="text/javascript">
function ValidateFileUpload() {
var fuData = document.getElementById('fileChooser');
var FileUploadPath = fuData.value;
//To check if user upload any file
if (FileUploadPath == '') {
alert("Please upload an image");
} else {
var Extension = FileUploadPath.substring(
FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
//The file uploaded is an image
if (Extension == "gif" || Extension == "png" || Extension == "bmp"
|| Extension == "jpeg" || Extension == "jpg") {
// To Display
if (fuData.files && fuData.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(fuData.files[0]);
}
}
//The file upload is NOT an image
else {
alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");
}
}
}
</SCRIPT>
更改輸入:
<input type="file" name="dataFile" id="fileChooser" onchange="return ValidateFileUpload()" />
要在上傳前顯示圖像:
<img src="images/noimg.jpg" id="blah">
我們解決了它..這是完整的代碼:)此代碼將幫助您
function show(input) { debugger; var validExtensions = ['jpg','png','jpeg']; //array of valid extensions var fileName = input.files[0].name; var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1); if ($.inArray(fileNameExt, validExtensions) == -1) { input.type = '' input.type = 'file' $('#user_img').attr('src',""); alert("Only these file types are accepted : "+validExtensions.join(', ')); } else { if (input.files && input.files[0]) { var filerdr = new FileReader(); filerdr.onload = function (e) { $('#user_img').attr('src', e.target.result); } filerdr.readAsDataURL(input.files[0]); } } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="form-group"> Upload Your Image <div class="col-md-10"> <div> <img id="user_img" height="130" width="130" style="border:solid" /> </div> <div> <input type="file" title="search image" id="file" name="file" onchange="show(this)" /> </div> </div> </div>
function isValidPhoto(fileName)
{
var allowed_extensions = new Array("jpg","png");
var file_extension = fileName.split('.').pop().toLowerCase();
for(var i = 0; i <= allowed_extensions.length; i++)
{
if(allowed_extensions[i] == file_extension)
{
return true; // valid file extension
}
}
return false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.