将图片加载到< img>从<输入文件> [英] Loading an image to a <img> from <input file>

问题描述

我在输入元素中添加了一个onchange事件处理函数，如下所示：

 < input type =filename =picFieldid =picFieldsize =24onchange =preview_2（this ）; ALT = /> 
  

和preview_2函数是：

  var outImage =imagenFondo; 
函数preview_2（什么）{
 globalPic = new Image（）; 
 globalPic.onload = function（）{
 document.getElementById（outImage）.src = globalPic.src; 
} 
 globalPic.src = what.value; 
} 
  

其中outImage具有标签的id值，我希望新图片但是，看起来onload永远不会发生，它不会加载任何内容到html。

p>我应该怎么做？在解析方法

中支持 File API ，您可以使用

示例

$ b FileReader 构造函数用于在用户选择文件后读取文件。 $ b

  document.getElementById（'picField'）。onchange = function（evt）{
 var tgt = evt.target || window.event.srcElement，
 files = tgt.files; 
 
 FileReader支持
 if（FileReader& amp;& amp; file&& files.length）{
 var fr = new FileReader（）; 
 fr.onload = function（）{
 document.getElementById（outImage）.src = fr.result; 
} 
 fr.readAsDataURL（files [0]）; 
} 
 
 //不支持
 else {
 // fallback  - 可能会将输入提交给iframe并临时存储
 //它们在服务器直到用户的会话结束。 
 
 
 $ / code $ / pre 
 $ b 
浏览器支持
 
 
 
 
 
 IE 10 
 
 
 Safari 6.0.2 
 
 
 Chrome 7 
 
 
 Firefox 3.6 
 
 
 Opera 12.02 
 
 
 
 
 
在不支持File API的情况下，不能（在大多数安全意识的浏览器中）从文件输入框中获取文件的完整路径，也不能访问数据。唯一可行的解​​决方案是将表单提交给隐藏的iframe，并将文件预先上传到服务器。然后，当请求完成时，您可以将图像的src设置为上传文件的位置。
 
I'm trying to load an image selected by the user through an  element.

I added a onchange event handler to the input element like this:
<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>
and the preview_2 function is:
var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}
where outImage has the id value of the  tag where I want the new picture to be loaded.

However, it appears that the onload never happens and it does not load anything to the html.

What should I do?
解决方案
In browsers supporting the File API, you can use the FileReader constructor to read files once they have been selected by the user.

Example

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}


Browser support


IE 10
Safari 6.0.2
Chrome 7
Firefox 3.6
Opera 12.02


Where the File API is unsupported, you cannot (in most security conscious browsers) get the full path of a file from a file input box, nor can you access the data.  The only viable solution would be to submit the form to a hidden iframe and have the file pre-uploaded to the server.  Then, when that request completes you could set the src of the image to the location of the uploaded file.

                        
这篇关于将图片加载到&lt; img&gt;从&lt;输入文件&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！