# 选择预览图片 input[type=file] 选择图片后, 显示在网页上; 支出多图显示 ``` <input type="file" onchange="showPreview(this)" accept="image/*" multiple /> <div id="tupian"></div> <script type="text/javascript"> function showPreview(source) { $('#tupian').empty(); var fileList = source.files; if(window.FileReader) { for (var i=0; fileList.length > i; i++) { // 创建FileReader对象, 并设置事件 var fr = new FileReader(); fr.onloadend = function(e) { $('#tupian').append('<img src="'+e.target.result+'" style="width:100px;height:100px; margin:0 3px" />'); } // 读图片 fr.readAsDataURL(fileList[i]); } } } </script> ``` ## 效果图 ![](https://img.kancloud.cn/20/b5/20b5c8bcb1b0bd771560208970afb4e5_457x304.gif) > 发生了什么 - `onchange` 触发 `showPreview` - `$('#tupian').empty();` 清空子元素 - `new FileReader` 创建fr对象 - `onloadend` 绑定加载完成事件 - `fr.readAsDataURL` 读图片 - 触发`onloadend` 事件