In my .php I have session_start();, and a default avatar for specific users $_SESSION['avatar']. These avatars is displayed with background-image:. I made a JavaScript that changes the background-image to the one uploaded input, but before the user choose to Save this image as their new profile avatar, they have the option to Cancel what they are doing. If they do Cancel I want to change the background back to their avatar, and I was thinking this would work, but it doesn't:
.php
session_start();
$CurrentAvatar = $_SESSION['avatar'];
.html
<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url("data:image/jpeg;base64,'.$_SESSION['avatar'].'");
border-radius: 50%;
background-size: cover;
}
</style>
.js
$("#imageUpload").change(function() {
$("#Change").show();
});
function Cancel() {
var CurrentAvatar = "<?php echo $CurrentAvatar;?>";
$("#Change").hide();
document.getElementById("imgDivEdit").style.backgroundImage =
"url(data:image/jpeg;base64,CurrentAvatar)";
}
$("#ChangeImg").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(uploader.files[0]);
reader.onloadend = function(){
document.getElementById("imgDivEdit").style.backgroundImage = "url(" + reader.result + ")";
}
}
}
$("#imageUpload").change(function() {
fasterPreview(this);
});
You overcomplicated with too many functions. Keep it simple. Click Run code snippet bellow bellow.
I rewrote my initial answer, therefore the code bellow is using pure JS and no jQuery.
document.getElementById('imageUpload').addEventListener('change', function(e) {
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
// If there are files, preview them, else go back to initial background
// which is defined inside <style> tags
if (this.files && this.files[0]) {
change_div.style.display = 'block';
let reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onloadend = function(){
preview_div.style.backgroundImage = "url(" + reader.result + ")";
}
} else {
Cancel();
}
});
function Cancel(){
let preview_div = document.getElementById("imgDivEdit"),
change_div = document.getElementById("Change");
change_div.style.display = 'none';
preview_div.style.backgroundImage = '';
}
<div id="avatar">
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<form method="POST" enctype="multipart/form-data">
<input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
<div id="Change" hidden>
<input type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
</div>
</form>
<style>
#imgDivEdit{
width: 125px;
height: 125px;
background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABLCAIAAABRBSb5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVHhe7ddBEsIwDENR7n/pknF+GBjYOHEKFXq7qmBby96Ov+GqilxVkasqclVFrqrIVRW5qiJXVeSqilxVkasqctUvuQUeqhXMrbqvz+mISq0O5bRANIspgajUb91XNeejX7+v0AVOrOKqilxVkasqclVFrqrIVRVdqWr/hGp4TrpMVVoGoqT5qqw960uVZYEoqaBqQ7QTmwJRUk3Vjhd7sCMQJS3dx+aBdA92BKKk1ftYPpBuwIJAlFRwHPsH0mpMD0RJNZdxwkBaitGBKKnsLK54xbsKTAxESbuueeDdMsYFoqTKqg23vOH1LKYMpEnFVTsu+oRfZPDPgTRvS9WGuzZgQd6uqg2n1WHurI1VH7h0GeNmnVH1GVcn8ec1Z1f9IldV5KqKXFWRqypyVUWuqshVFf1N1eO4A7VmgBItY0/QAAAAAElFTkSuQmCC);
border-radius: 50%;
background-size: cover;
}
</style>
Related
I have a problem with If condition when I want to check a value setting from and AJAX consult.
I made a simple page to show the problem:
Main page: https://testdomain3.000webhostapp.com/Test.php
AJAX response: https://testdomain3.000webhostapp.com/Response.php
With the "Yes" and "No" buttons you set the innerHTML value of Span "txtHint4" to "Yes" or "No" respectively.
If click "Check" button, Span "txtHint6" shows value "Ok" if "txtHint4"=Yes or "Ko" if "txtHint4"=No.
All of this works well setting innerHTML "txtHint4" value with the buttons like said but if I set the value with and AJAX consult (with button "Ask AJAX") the if.. then.. statement executed with "Check" button fails to verify the condition and shows "Ko" when it should show "Ok" because "txtHint4"=Yes.
Its the main code:
<html>
<body>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Yes" onclick="Yes()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
<input type="button" name="Button" value="No" onclick="No()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
</div>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Ask AJAX" onclick="Ask()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px"/>
</div>
<div style="border: 1px solid black; width:990px;float:left; margin-top:30px; margin-bottom:0px; font-size:50">
<span id="txtHint4"></span>
</div>
<div style="width:1000px; float:left; margin-top:30px; margin-bottom:30px">
<input type="button" name="Button" value="Check" onclick="Check()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px"/>
</div>
<div style="border: 1px solid black; width:990px;float:left; margin-top:0px; margin-bottom:30px; font-size:50">
<span id="txtHint6"></span>
</div>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Erase" onclick="Erase()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px"/>
</div>
<script>
function Yes(){
document.getElementById("txtHint4").innerHTML="Yes";
;}
</script>
<script>
function No(){
document.getElementById("txtHint4").innerHTML="No";
;}
</script>
<script>
function Check() {
var Text=document.getElementById("txtHint4").innerHTML;
if (Text=="Yes"){document.getElementById("txtHint6").innerHTML = "ok";}
else {document.getElementById("txtHint6").innerHTML = "ko";}
;}
</script>
<script>
function Ask() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {document.getElementById("txtHint4").innerHTML = this.responseText;}
xmlhttp.open("GET", "https://testdomain3.000webhostapp.com/Response.php", true);
xmlhttp.send();
}
</script>
<script>
function Erase(){
document.getElementById("txtHint4").innerHTML="";
document.getElementById("txtHint6").innerHTML="";
;}
</script>
</body>
</html>
And the consult AJAX page:
<?php
echo "Yes";
;?
Thank you in advance
You need to use .trim() function to make sure any unseen spaces are removed from the responseText.
When you add innerHTML its adding unseen spaces to your txtHint4 text. So when checking the if condition just use trim() with you Text.
In addtion, i would also recemned using textContent as oppose to innerHTML since you are only adding simple text and and not HTML text
Live Working Demo:
function Yes() {
document.getElementById("txtHint4").innerHTML = "Yes";
}
function No() {
document.getElementById("txtHint4").innerHTML = "No";
}
function Erase() {
document.getElementById("txtHint4").innerHTML = "";
document.getElementById("txtHint6").innerHTML = "";
}
function Check() {
var Text = document.getElementById("txtHint4").innerHTML;
if (Text.trim() == "Yes") { //use trim() function
document.getElementById("txtHint6").innerHTML = "ok";
} else {
document.getElementById("txtHint6").innerHTML = "ko";
};
}
function Ask() {
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
document.getElementById("txtHint4").innerHTML = req.responseText;
}
};
req.open("GET", "https://cors-anywhere.herokuapp.com/https://testdomain3.000webhostapp.com/Response.php", true);
req.send();
}
<html>
<body>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Yes" onclick="Yes()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px" />
<input type="button" name="Button" value="No" onclick="No()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px" />
</div>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Ask AJAX" onclick="Ask()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px" />
</div>
<div style="border: 1px solid black; width:990px;float:left; margin-top:30px; margin-bottom:0px; font-size:50">
<span id="txtHint4"></span>
</div>
<div style="width:1000px; float:left; margin-top:30px; margin-bottom:30px">
<input type="button" name="Button" value="Check" onclick="Check()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold; padding:5px" />
</div>
<div style="border: 1px solid black; width:990px;float:left; margin-top:0px; margin-bottom:30px; font-size:50">
<span id="txtHint6"></span>
</div>
<div style="width:1000px; float:left">
<input type="button" name="Button" value="Erase" onclick="Erase()" id="button" style="cursor: pointer; font-size:32px; font-weight:bold;padding:5px" />
</div>
</body>
</html>
I have a main div and the sub div which is also called form because form is wrapped inside of div. I want is to close the form when clicked outside of the main div but it's not happening at all. Please help me how to fix this.
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(){
box.style.display = "block";
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event){
if(event.target == box){
form.style.display = "none";
}
}
#abc{
display: none;
background-color: #F44336;
}
<button id = "opener">
Open
</button>
<div id = "abc">
<!-- Login Authentication -->
<div id = "def">
<div>
<p>Welcome</p>
</div>
<br />
<div class = "login-auth" id = "cool">
<form method="POST">
<label>Email or Username:</label>
<input type = "text">
<br />
<label>Password:</label>
<input type = "password">
<br /><br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
JSFiddle Link Here: https://jsfiddle.net/twrvpp3d/
Your code is working fine, the only problem that you need to stop the click event from propagating by using e.stopPropagation() for the button and the popup window, this will create the desired effect! Refer my below snippet!
#def{
border:1px solid black;
}
#abc{
padding:40px;
}
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(e) {
e.stopPropagation();
box.style.display = "block";
}
box.onclick = function(e) {
e.stopPropagation();
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event) {
box.style.display = "none";
}
#abc {
display: none;
background-color: #F44336;
}
#def {
border: 1px solid black;
}
#abc {
padding: 40px;
}
<button id="opener">
Open
</button>
<div id="abc">
<!-- Login Authentication -->
<div id="def">
<div>
<p>Welcome</p>
</div>
<br />
<div class="login-auth" id="cool">
<form method="POST">
<label>Email or Username:</label>
<input type="text">
<br />
<label>Password:</label>
<input type="password">
<br />
<br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
I know this is not what you are asking but can you make toggle button? its easier to do and more obvious for user.
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(e){
if(e.target.innerHTML === 'Open'){
box.style.display = "block";
e.target.innerHTML = "Close"
}else{
box.style.display = "none";
e.target.innerHTML = "Open"
}
}
//Doesn't work. It's function is to close the form when click outside of the div.
window.onclick = function(event){
if(event.target == box){
form.style.display = "none";
}
}
#abc{
display: none;
background-color: #F44336;
}
<button id = "opener">
Open
</button>
<div id = "abc">
<!-- Login Authentication -->
<div id = "def">
<div>
<p>Welcome</p>
</div>
<br />
<div class = "login-auth" id = "cool">
<form method="POST">
<label>Email or Username:</label>
<input type = "text">
<br />
<label>Password:</label>
<input type = "password">
<br /><br />
<input type="submit" value="Login">
</form>
</div>
</div>
</div>
window.onclick does not work on certain browsers. Try document.onclick instead.
I'm building a user-submission system where a user can input data and an XML will be exported (which can be read by a different software down the line) but I'm coming across a problem where when I replicate the form for the user to input info, the XML is only taking information from the first.
Any suggestions on how do this?
Personal test code:
HTML:
$(function () {
$('#SubmitButton').click(update);
});
var added = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
var adding = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
function update() {
var variables = {
'channeldescription': $('#channeldescription').val(),
'channelrecordnumber': $('#channelrecordnumber').val(),
'channelhexcolor': $('#channelhexcolor').val(),
'channelbamlink': $('#channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
var finalXML = newXml;
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
added = added + '\n' + adding;
$("body").append($("#Entries:first").clone(true));
}
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea id="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input id="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input id="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
<input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>
http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J
Change your ids to classes use a loop to get all the entries
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
.leftmargin {
margin-left: 2%;
}
.form {
background-color: #CBE8BA;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}
.forminput {
padding-left: 1.5%;
padding-top: 0.5%;
display: flex;
}
.button_fixed {
position: fixed;
margin-left: 2%;
bottom: 1%;
}
</script>
<script>
$(function () {
$('#SubmitButton').click(function(){
var finalXML = '';
$(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
});
});
});
var added = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
var adding = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
function update(finalXML,v) {
var variables = {
'channeldescription': $(v).find('.channeldescription').val(),
'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
'channelhexcolor': $(v).find('.channelhexcolor').val(),
'channelbamlink': $(v).find('.channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
return newXml;
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
$("body").append($(".Entries:first").clone(true));
}
</script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea class="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input class="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input class="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">BAM file Repsitory Link</label>
<input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>
demo:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4
I have a file upload that I'm trying to get in Bootstrap layout. I have the following code:
<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse;
<input type="file" name="filefield" single>
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<button class="btn btn-primary type="submit">Upload image</button>
</form>
I have following css file:
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
input[readonly] {
background-color: white !important;
cursor: text !important;
}
and following JS file:
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready( function() {
$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
The problem is that once I select the file (for upload), it does not display in the text box. I would expect it to show the selected file.
I have added the css and js file through gulpfile.js (Elixir). It compiled correctly. The JSfiddle file is here
Note: when I comment out the css and js file from the gulpfile.js and change the form to the below and run gulp again it works (although Bootstrap file is not applied). See screenshot.
<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
Browse
<input type="file" name="filefield" single>
<div>
<button class="btn btn-primary type="submit">Upload image</button>
</div>
</form>
See
I have a form, I want to append a entire div every time a button is clicked. The code works but after few seconds the appended div automatically disappears. don't get any errors.
I am using jQuery 2.1.3. Here is my code in JS Fiddle:
https://jsfiddle.net/sathyabaman/jgdLtu4d/
My code:
<form method="POST" id="form_property" enctype="multipart/form-data">
<div class="row">
<div class="span4" id="image">
<h3><strong>4.</strong> <span>Add Images to your Property (Maximum : 6 Images)</span></h3>
<div id="clone_image" class="fileupload fileupload-new ">
<label class="control-label">Image file</label>
<div class="input-append">
<div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div> <span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="files1" accept="image/*" />
</span>
</div>
</div>
</div>
<!-- /.span4 -->
</div>
<!-- /.row -->
<br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="">Add Another Image</a>
<br/>
<br/>
<input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
</form>
jquery
$(document).ready(function(){
var count = 2;
$('#another_image').click (function(){
var clonedEl = $('#clone_image').first().clone()
clonedEl.find(':file').attr('name','files'+count)
if(count < 7){
if(count == 6){ $('#another_image').hide();}
$(clonedEl).appendTo("#image");
count++;
}
});
});
Thank you..
You need to prevent the default action of the anchor click, which is to navigate to the target page.
Since you have specified an empty href it reloads the same page that is why you can see the new element and then it appears to be disappearing.
$(document).ready(function () {
var count = 2;
$('#another_image').click(function (e) {
//e.preventDefault()
var clonedEl = $('#clone_image').first().clone()
clonedEl.find(':file').attr('name', 'files' + count)
if (count < 7) {
if (count == 6) {
$('#another_image').hide();
}
$(clonedEl).appendTo("#image");
count++;
}
});
});
Demo: Fiddle