從html輸入字段獲取值插入到使用jquery的src標記

我有一個輸入字段，我通過瀏覽按鈕插入值現在我想從輸入字段將該值複製到src標記，以便我可以預覽該用戶剛剛上傳從html輸入字段獲取值插入到使用jquery的src標記

這裏形象是我的代碼

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');"/>

我想從上面的輸入字段複製所選值

<img src="myimage" />

來源

2013-07-05 Tousif

你目前的JavaScript代碼在哪裏？ –

添加代碼。到目前爲止你做了什麼？什麼沒有用？這聽起來像是應該在服務器端完成的事情，因爲簡單地將文件名插入到「字段中不會」上傳「它。 – Sumurai8

您無法直接訪問用戶文件系統中的文件。閱讀關於FileReader API。看看這個例子：http://jsfiddle.net/VM7sy/。閱讀[更多]（https://developer.mozilla.org/en-US/docs/Web/API/FileReader）。 – dfsq

你不能直接顯示我t從用戶的計算機，而不是你需要先上傳到你的服務器，然後顯示它。使用ajax上傳文件會產生你想要的效果。也看看：FileReader API @ MDN

更新：因爲你已經在服務器上的圖像試試下面

代碼試試這個代碼：

HTML：

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');" /> 
<img src="myimage" />

JS：

setInterval(react, 5000); 
function react() { 
    document.getElementByTagName("img").src = document.getElementByName("logo").value; 
}

來源

2013-07-05 20:21:30

實際上沒有文件axist已經在服務器上，因爲你看到我已包含tinybrowser，點擊功能微型瀏覽器上傳文件在我的圖像目錄，然後返回路徑輸入值name =「logo」 – Tousif

檢查我的編輯，看看是否可行 –

onchange只有當我們在輸入字段（通過鍵盤）輸入東西時才起作用，在這種情況下我們不會寫任何東西，我們只需從tinybrowser中選擇文件，然後所有的路徑出現在輸入字段onchange失敗，直到我們在輸入框中點擊並寫入東西 – Tousif

添加一個id img標籤和使用

var imagepath = $('#logo').val(); 
$('#myimg').attr('src', imagepath);

當輸入改變

來源

2013-07-05 20:49:04

你火的功能，我用下面的代碼這裏面工作。我喜歡將函數放在body上，這樣即使通過AJAX添加了類，「change」命令仍然會觸發事件。

我的方法確實使用jQuery。

HTML：

<input class="text-input" class="classhere" type="text" name="logo" id="logo" /> 
<div class="imagearea"></div>

JS：

$("body").on("change",".classhere",function(){ 
    //Equivalent of getElementById 
    var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array. 
    var file = fileInput.files[0]; //there is only '1' file since they are not multiple type. 

    var reader = new FileReader(); 
    reader.onload = function(e) { 
     // Create a new image. 
     var img = new Image(); 

     img.src = reader.result; 
     $(".imagearea").html(img); 
    } 

    reader.readAsDataURL(file);//attempts to read the file in question. 
});

此方法使用HTML5文件系統API的讀取圖像，並把它變成一個新的JavaScript的img對象。這裏的關鍵是readAsDataURL。如果您使用鉻檢查器，您會注意到圖像以base64編碼存儲。

讀者是異步，這就是爲什麼它使用onload回調函數。因此，請確保任何需要圖像的重要代碼位於onLoad內，否則您可能會收到意想不到的結果。

來源

2013-12-12 04:16:19

從html輸入字段獲取值插入到使用jquery的src標記

回答

相關問題