从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标记

回答

相关问题