将图像加载到<输入文件>中的<img>

Question

我正在尝试加载用户通过元素选择的图像.

我在输入元素中添加了一个onchange事件处理程序,如下所示:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

而preview_2函数是:

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

其中outImage具有我想要加载新图片的标签的id值.

但是,似乎onload永远不会发生,并且它不会向html加载任何内容.

我该怎么办？

Answer 1

在支持File API的浏览器中,您可以使用FileReader构造函数在用户选择文件后读取文件.

例

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.
    }
}

浏览器支持

• IE 10
• Safari 6.0.2
• Chrome 7
• Firefox 3.6
• 歌剧12.02

如果不支持File API,则不能(在大多数安全意识的浏览器中)从文件输入框中获取文件的完整路径,也无法访问数据.唯一可行的解​​决方案是将表单提交给隐藏的iframe,并将文件预先上传到服务器.然后,当该请求完成时,您可以将图像的src设置为上载文件的位置.

Answer 2

正如iEamin在他的回答中所说,HTML 5现在支持这一点.他给出的链接http://www.html5rocks.com/en/tutorials/file/dndfiles/非常好.以下是基于该站点样本的最小样本,但请参阅该站点以获取更详尽的示例.

onchange向HTML 添加事件侦听器:

<input type="file" onchange="onFileSelected(event)">

制作带有id的图像标签(我指定height=200确保图像在屏幕上不是太大):

<img id="myimage" height="200">

这是onchange事件监听器的JavaScript .它接受File传递的对象event.target.files[0],构造a FileReader来读取其内容,并设置新的事件侦听器以将结果data:URL 分配给img标记:

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

Answer 3

ES2017方式

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Answer 4

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgload" >
 <img src="#" id="imgshow" align="left">

//在jQuery中对我有用

Answer 5

最简单的方法是创建一个对象 URL

<input onChanged={(event)=>{ URL.createObjectURL(event!.target!.files[0]) }} />