script içindeki linki alma

08-02-2014, 01:14:02

arkadaşlar javascript bilgim maalesef yok. ama bana lazım olan koduda sadece javascript ile yazılmış halde bulabildim. şimdi bulduğum kod ile resim upload ediliyor. upload sonunda da script içinde bir link oluşturulup ekrandaki texte yansıtılıyor. ben bunu textbox a yazdırmak istiyorum. nasıl yapacağımı anlayamadım bir türlü. kod şöyle;

<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<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").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
            document.body.className = "uploaded";
        }
        // Ok, I don't handle the errors. An exercice for the reader.

        /* And now, we send the formdata */
        xhr.send(fd);
    }
</script>

<style>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #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}
    em {position: absolute; bottom: 0; right: 0}
</style>

<p><img src="images/uploadingbar.gif" /></p>

<a target="_blank" id="link">It's online!!!</a>

08-02-2014, 01:27:26

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){

    var veribas = $(".verial").text();

    $(".veribas").val(veribas);

	});


</script>


</head>
<body>
	

<p class="verial"> deneme</p>

<input type="text" class="veribas" val="">

</body>
</html>

08-02-2014, 02:18:56

PetitJoueur

EA adlı üyeden alıntı: mesajı görüntüle

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){

    var veribas = $(".verial").text();

    $(".veribas").val(veribas);

	});


</script>


</head>
<body>
	

<p class="verial"> deneme</p>

<input type="text" class="veribas" val="">

</body>
</html>

var veribas = $(".verial").text();

buradaki verial yerine ne yazmam gerekiyor benim kodda? uploaded yazdım, çıkarmadı bir şey. link yazdım çıkarmadı. class değeri link değil mi benim kod da? kafam karıştı vallahi.

08-02-2014, 02:24:52

#4

EA

nereden veri çekmek istiyorsanız onun classını yazın.
sanırım paylaşmış olduğunuz kodlar eksik demo alabilirsem daha kolay yardımcı olabilirim

08-02-2014, 02:30:10

PetitJoueur

EA adlı üyeden alıntı: mesajı görüntüle

nereden veri çekmek istiyorsanız onun classını yazın.
sanırım paylaşmış olduğunuz kodlar eksik demo alabilirsem daha kolay yardımcı olabilirim

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<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").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
            document.body.className = "uploaded";
        }
		
        xhr.send(fd);
    }
</script>

<style>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #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}
    em {position: absolute; bottom: 0; right: 0}
</style>

<p>Uploading...</p>

<a target="_blank" id="link">It's online!!!</a>

yukardaki kod çalışır durumda hocam. dosya upload yapıyor sonunda da It's online!!! diye bir link çıkarıyor. kodun en altında yazıyor zaten o da ama linki kodda görünmüyor.

08-02-2014, 02:48:20

Big_Turk

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<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>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #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}
    em {position: absolute; bottom: 0; right: 0}
</style>

<p>Uploading...</p>
<input type="text" id="link" name="resimurl" >

şu şekilde deneyin çalışması lazım..

08-02-2014, 02:52:28

PetitJoueur

Big_Turk adlı üyeden alıntı: mesajı görüntüle

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<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>
    body {text-align: center; padding-top: 100px;}
    div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
    #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}
    em {position: absolute; bottom: 0; right: 0}
</style>

<p>Uploading...</p>
<input type="text" id="link" name="resimurl" >

şu şekilde deneyin çalışması lazım..

çok sağolun hocam. oldu