Html代码,我正在调用上传方法和上传,我正在使用Php和javascript代码,我创建了upload()
调用提交按钮,我只是想使用preventDefault()
警报框的代码,因为当用户上传无效图像警告框时出现,并通过在注册了无效图像的警报框中单击确定
<form role="form" action="registration.php" method="post" class="registration-
form form-width" enctype="multipart/form-data" >
<fieldset>
<div class="form-top">
<div class="form-top-left">
<!-- <h3>Step 2 / 3</h3>
<p>Set up your account:</p> -->
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="company_name">Company Name:</label>
<input type="text" name="company_name" id="company_name" placeholder="Company Name" class="form-text form-control" required>
</div>
<div class="form-group">
<label class="sr-only" for="Founder_name">Founder Name</label>
<input type="text" name="founder_name" id="Founder_name" placeholder="Founder Name" class="form-text form-control" required>
</div>
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email" class="form-email form-control" id="form-email" value="<?php echo $user->emailAddress ?>" readonly>
</div>
<div class="form-group">
<label class="sr-only" for="form-password">password</label>
<input type="password" name="form-password" placeholder="password" class="form-password form-control" id="form-password" required>
</div>
<div class="form-group">
<label class="sr-only" for="confirm_password">Repeat password</label>
<input type="password" name="confirm_password" placeholder="confirm password" class="form-repeat-password form-control" id="form-repeat-password" >
<span id='message'></span>
</div>
<button type="button" class="btn btn-next" id="next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<!-- <h3>Step 3 / 3</h3>
<p>Social media profiles:</p> -->
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-facebook">company url</label>
<input type="url" name="company_url" id="company_url" placeholder="company Url" class="form-url form-control">
</div>
<div class="form-group">
<label for="sel1">width</label>
<select class="form-control" id="width" name="width">
<option value="" disabled selected>Select your option</option>
<option>100</option>
<option>200</option>
<option>200</option>
</select>
</div>
<div class="form-group">
<label for="sel1">Height</label>
<select class="form-control" id="height" name="height">
<option value="" disabled selected>Select your option</option>
<option>100</option>
<option>100</option>
<option>200</option>
</select>
</div>
<div class="form-group">
<label for="file">Company Logo</label>
<input type="file" name="fileUpload" placeholder="company logo" class="form-google-plus form-control" id="fileUpload">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button name="submit" type="submit" class="btn" onclick="return Upload()">Submit</button>
</div>
</fieldset>
</form>
<script type="text/javascript">
function Upload() {
//Get reference of FileUpload.
var fileUpload = document.getElementById("fileUpload");
var user_height= document.getElementById('height').value;
var user_width= document.getElementById('width').value;
//Check whether the file is valid Image.
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
//Check whether HTML5 is supported.
if (typeof (fileUpload.files) != "undefined") {
//Initiate the FileReader object.
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
//Validate the File Height and Width.
image.onload = function () {
var height = this.height;
var width = this.width;
if (height > user_height || width > user_width) {
alert("Height and Width must be equal to given size.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
}
} else {
alert("This browser does not support HTML5.");
return false;
}
} else {
alert("Please select a valid Image file.");
return false;
}
}
</script>