文件上传器表单提交事件调用面板以显示包含文件更新程序我想删除代码重写在 jquery 中使用循环重写所有文件类型
本文关键字：文件 重写 jquery 代码 删除 类型 循环 程序 表单提交 事件 调用 | 更新日期: 2023-09-27 18:34:08
我希望fileuploader在文件选择fileuploader调用另一个事件/函数并删除每个上传者的重写代码
CSS 代码
#panel,#flip,#panel1,#panel2
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
#panel1
{
padding:50px;
display:none;
}
#panel2
{
padding:50px;
display:none;
}
网页代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style> <html xmlns="http://www.w3.org/1999/xhtml">
<form id="form1" runat="server" >
<div id="flip">
<input id="fileupload" type="file" />
</div>
<div id="panel">
<input id="fileupload1" type="file" />
</div>
<div id="panel1">
<input id="fileupload2" type="file" />
</div>
<div id="panel2">
<input id="fileupload3" type="file" />
</div>**
j查询代码文件上传器文件选择事件的代码，我正在选择我希望显示下一个文件上传者
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
var regex = /^([a-zA-Z0-9's_''.'-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel").show();
// $("#dvPreview")
[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload1").change(function () {
var regex = /^([a-zA-Z0-9's_''.'-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel1").show();
// $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel1").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload2").change(function () {
var regex = /^([a-zA-Z0-9's_''.'-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel2").show();
// $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel2").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</body>
</html>
希望下面的JS代码对您有所帮助。修改了JS，并在几乎没有修改的情况下使用了HTML和CSS。
.JS
function validate_file()
{
if($("input[type^=file]").val() == '' || $("input[type^=file]").val() == null )
{
alert("Please upload file");
return false;
}
else
{
var count = $("input[type^=file]").length;
var fileName = $('input[type^=file]:visible').val();
alert($("input[type^=file]")[0].files[0].name);
if($('input[type^=file]:visible').val() != '' || $('input[type^=file]:visible').val() != null)
{
var ext = fileName.substr((fileName.lastIndexOf('.') + 1));
alert(ext);
if(ext == 'jpg' || ext == 'bmp' || ext == 'png')
{
alert("Valid file");
$("div[id^=panel]:visible").next().css('display','block');
}
else
{
alert("Uploaded file is invalid");
return false;
}
}
else
{
alert('please select file to upload');
return false;
}
}
return false;
}
$(document).ready(function() {
$("input[type^=file]").change(function(){
validate_file();
});
});
</script>
.HTML
<form id="form1" >
<div id="panel1" class="panel">
<input type="file" id="fileupload1"/>
</div>
<div id="panel2" class="panel">
<input type="file" id="fileupload2"/>
</div>
<div id="panel3" class="panel">
<input type="file" id="fileupload3"/>
</div>
<div id="panel4" class="panel">
<input type="file" id="fileupload4"/>
</div>
</form>
.CSS
<style type="text/css">
#panel1,#panel2,#panel3,#panel4
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel2
{
padding:50px;
display:none;
}
#panel3
{
padding:50px;
display:none;
}
#panel4
{
padding:50px;
display:none;
}
</style>