kodlar şöyle. style dosyası yüzünden sanırım sağlıklı sonuç alamıyorum. ama "Choose Photo" butonuna tıklandığında Uploading yazacak, upload bittikten sonrada textbox içinde adresi gösterecek. ama style ı kaldırdığımda hepsi görünüyor.

birde form içinde choose photo ve send butonlarını nasıl ayrı ayrı çalışır hale getiririm? choose photo gözat tarzı bir buton, send de formu yolluyor. şu haliyle choose desem bile yollamaya kalkıyor formu.

<div id="upload1"><form id="form2" action="send.asp" method="post">	
			<h3><span>SEND PHOTO</span></h3>
			<fieldset><legend>Send Photo</legend>
			<p class="first">
					<input placeholder="Write Your Name" type="text" name="name" id="name" size="30" />
				</p>
				<p>
					<input placeholder="Write Your Email" type="text" name="email" id="email" size="30" />
				</p>
                <p>
					<input placeholder="Write Photo's Country" type="text" name="country" id="country" size="30" />
			</p>	
				<p>
				  <input placeholder="Write Photo's City" type="text" name="city" id="city" size="30" />
				</p>
                <p>
				  <button onClick="document.querySelector('input').click()">CHOOSE PHOTO</button>
<input style="visibility: collapse; width: 0px;" type="file" onChange="upload(this.files[0])">

<script>
 
    window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function upload(file) {
 
        if (!file || !file.type.match(/image.*/)) return;
 
        document.body.className = "uploading";
 
        /* Lets build a FormData object*/
        var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
        fd.append("image", file); // Append the file
        fd.append("key", "6528448c258cff474ca9701c5bab6927"); // Get your own key http://api.imgur.com/
        var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
        xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
        xhr.onload = function() {
            // Big win!
            document.querySelector("#link").value = JSON.parse(xhr.responseText).upload.links.imgur_page;
            document.body.className = "uploaded";
        }
       
        xhr.send(fd);
    }
</script>
<style>
    #link, p , div {display: none}
    div {display: inline-block;}
    .uploading div {display: none}
    .uploaded div {display: none}
    .uploading p {display: inline}
    .uploaded #link {display: inline}
</style>
<p>Uploading...</p>
<input name="resimurl" readonly="readonly" type="text" id="link" size="35" >
				</p>	
                																									
				<p class="submit"><button type="submit">Send Your Photo</button></p>					
			</fieldset>									
		</form>
        </div>