0
我已經使用它自己的bootstrap創建了一個Image Uploader，但是當我在我的頁面中使用它的bootstrap.css標記和其他標籤時，CSS會受到影響，並且不會給出正如我設計的正確輸出。這是My Form其中我需要應用此Image Uploader。但是，當我插入或複製此圖像上傳程序腳本及其CSS到圖像中的我的表單部分。它擾亂了我的整個CSS，並只使用引導CSS並提交表單，即使在清除按鈕上點擊。在我將兩個My Form &圖片上傳器混合後，我得到下面給出的代碼和代碼片段的輸出，這是JSFIDDLE。我在添加圖片上傳器後，請檢查我的表格和表格，這會干擾我的css文件，甚至不會顯示圖片的預覽。我不確定我會在哪裏出錯。插入bootstrap.css而不影響或改變我的css
$("#ImageUploader").submit(function (e) {
"use strict";
var fileUpload = $("#file")[0].files,
fileCount = $("#file")[0].files.length;
if (parseInt(fileCount) > 5) {
alert("You can only upload a maximum of 5 files");
e.preventDefault();
} else if (parseInt(fileCount) < 2) {
alert("You need to upload minimum 2 images");
e.preventDefault();
} else if (fileCount === 0 || typeof fileUpload === "undefined") {
alert("No files are selected.");
e.preventDefault();
}
});
function deleteAll() {
"use strict";
$(".img-preview-area").html("<p>Image Preview...</p>");
$(":file").filestyle('clear');
}
$("input:file").on('change', function() {
"use strict";
if (this.files.length >= 1) {
$(".img-preview-area").html("");
$("[id^=previewImg]").remove();
$.each(this.files, function (i, img) {
var reader = new FileReader(),
preview = $("<img class='img-responsive img-thumbnail image-container' />");
reader.onloadend = function() {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
preview.appendTo(".img-preview-area");
});
}
});
function checkedAll(ele) {
"use strict";
var arrayOfElements = ele.closest("#colors").getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i];
if (ele !== item && document.contains(item) === true) {
arrayOfElements[i].checked = ele.checked;
}
}
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
function isNumberKeyspecial(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
var message = "";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2 || e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
function resetForm() {
"use strict";
var arrayOfElements = document.getElementsByTagName("input"),
item,
i = 0;
for (i; i < arrayOfElements.length; i = i + 1) {
item = arrayOfElements[i].name;
if (item.match(/qty/gi) !== null) {
arrayOfElements[i].disabled = true;
} else {
arrayOfElements[i].checked = false;
}
}
document.getElementById("masterform").reset();
}
function codename(ele) {
"use strict";
document.getElementsByName(ele.name + "qty")[0].disabled = !ele.checked;
}body {
background-image: url(../header_bg.jpg);
background-size: cover;
}
hr {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
hr:after {
content:"\00a0";
}
textarea {
resize: none;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=radio] {
cursor: pointer;
}
b {
cursor: default;
}
th {
cursor: default;
}
td {
cursor: default;
}
input[type=text] {
cursor: cell;
}
textarea {
cursor: cell;
}
input[type="reset"] {
width: 10em;
height: 2em;
border: none;
background: transparent;
font-weight: bold;
cursor: pointer;
}
input[disabled] {
background: transparent;
border: none;
cursor: default;
}
input:disabled::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
}
input:disabled:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
}
input:disabled::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
}
input:disabled:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
}
#back {
width:28em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#view {
width:10em;
height:2em;
border:none;
background: transparent;
font-weight:bold;
cursor:pointer;
}
#toptable {
box-shadow: 20px 20px 10px #000000;
background-color: white;
}
.col-centered {
float: none;
margin: 0 auto;
}
.pad-top {
padding-top: 15vh;
}
.image-container {
padding-right: 5px;
}
img {
max-height: 150px;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://markusslima.github.io/bootstrap-filestyle/js/bootstrap-filestyle.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<b>
Welcome : Username
</b>
<hr></hr>
<hr></hr>
<br/>
<h2><center>Bangles</center></h2>
<table border="2" id="toptable" align="center">
<tr>
<th>
<input type="button" value="View Products" name="view_products" id="view" onclick="location.href='addBangles.php'">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="button" value="Go Back To The HomePage Of This Website" name="back" id="back" onclick="location.href='home.php'">
</th>
</tr>
</table>
<br/><br/>
<form action="" method="POST" enctype="multipart/form-data" id="masterform" name="masterform">
<table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
<tr>
<th>
<p align="Left">
Name : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
</td>
</tr>
<tr>
<th>
<p align="Left">Description : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="0">
<textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
</td>
</table>
</tr>
<tr>
<th>
<p align="Left">Size & Weight<sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<table border="1">
<td title="Size 2.2">
<label>
<input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename(this)">2.2
<br>
<input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
</label>
</td>
<td title="Size 2.4">
<label>
<input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename(this)">2.4
<br>
<input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
</label>
</td>
<td title="Size 2.6">
<label>
<input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename(this)">2.6
<br>
<input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.8">
<label>
<input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename(this)">2.8
<br>
<input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td title="Size 2.10">
<label>
<input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename(this)">2.10
<br>
<input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
</label>
</td>
<td style="border-style: none;">
<input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
</td>
</th>
</table>
</tr>
<tr>
<th>
<p align="Left">Color : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td id="colors">
<table>
<td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
</label>
</td>
<td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
</label>
</td>
<td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
</label>
</td>
<td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="White_Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
</label>
</td>
</tr>
<tr>
<td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
</label>
</td>
<td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
</label>
</td>
<td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Red_Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
</label>
</td>
</tr>
<tr>
<td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
</label>
</td>
<td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Green_Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
</label>
</td>
<tr>
<td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
</label>
</td>
<tr>
<td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
<label>
<input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
</label>
</td>
<td title="Select All" align="right" style="border-style: none;">
<input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(this);'>
</td>
<td style="border-style: none;"> \t <b title="Select All">All</b>
</td>
</table>
</td>
</tr>
</tr>
<tr>
<th>
<p align="Left">Price : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td>
<table border="1">
<td>
<input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
<td>
<input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
</td>
</td>
</tr>
</table>
<tr>
<th title="Special Price Validity Dates;(note it is valid only if entered special price)">
<p align="Left">Special Date : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<td title="Special Price Validity Dates;(note it is valid only if entered special price)">
<table border="0">
<tr>
<th title="Special Price Validity Starting Date">Start Date:</th>
<td>
<input type="date" name="startingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th title="Special Price Validity Ending Date">End Date:</th>
<td>
<input type="date" name="endingdate" min="2015-02-01">
<br>
</td>
</tr>
<tr>
<th> \t <font color="white" size="0">Hello</font>
</th>
</tr>
<tr>
<th> \t <font color="white" size="0">Hello</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<th title="Status(Should the Product be visible to the customers)">
<p align="Left">Status : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Enable :
<input type="radio" name="status" value="enable" title="Enable The Status">
</label>
<label>Disable :
<input type="radio" name="status" value="disable" title="Disable The Status">
</label>
</th>
</tr>
<tr>
<th title="Tax Class(which type of tax should be applied on the product)">
<p align="Left">Tax Class : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<label>Taxable :
<input type="radio" name="tax" value="taxable" title="Taxable Goods">
</label>
<label>Shipping :
<input type="radio" name="tax" value="shipping" title="Shipping">
</label>  
<label>None :
<input type="radio" name="tax" value="None" title="None from both on the left">
</label>
</th>
</tr>
<tr>
<th title="Upload mages of your product">
<p align="Left">Images : <sup><font color="red">*</font></sup>
</p>
</th>
<th></th>
<th></th>
<th></th>
<th>
<div class="container pad-top">
<div class="row">
<div class="panel">
<div class="panel-body img-preview-area">
<p>Image Preview...</p>
</div>
<div class="panel-footer">
<button class="btn btn-warning" onClick="deleteAll()"><i class='glyphicon glyphicon-remove'></i> Clear</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-centered">
<input type="file" id="file" class="filestyle" name="files[]" multiple="multiple" accept="image/*">
</div>
</div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<th>
<input type="reset" name="reset" value="Reset" onclick="resetForm();" title="Reset All The Details">
</th>
<th></th>
<th></th>
<th></th>
<th>
<input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" id="upload" class="upload" style=" \t width: 33em;height: 2em;
\t \t \t \t \t \t \t border:none;
\t \t \t \t \t \t \t background: transparent;
\t \t \t \t \t \t \t font-weight:bold;
\t \t \t \t \t \t \t cursor:pointer;">
</th>
</tr>
</table>
</form>
</body>
嘗試保持你的CSS鏈接引導的CSS鏈接後。我正在談論文件的鏈接。 –
@sanjeevshetty嗯，我沒有嘗試，但它沒有幫助，它仍然影響頁面的設計，甚至提交上點擊清除按鈕 –
可能插入「！重要」在什麼類的影響通過boostrap或提取任何需要在boostrap做你想要的你的CSS文件？ –