上传前显示图像预览
在我的HTML表单中，我input了types文件，例如：
<input type="file" multiple> 然后通过点击inputbutton来select多个文件。 现在我想在提交表单之前显示所选图像的预览。 如何在HTML 5中做到这一点？
HTML5附带了File API规范 ，它允许您创build允许用户在本地与文件交互的应用程序; 这意味着您可以加载文件并在浏览器中渲染它们，而无需实际上传文件。 File API的一部分是FileReader接口，它可以让Web应用程序asynchronous读取文件的内容。
下面是一个简单的例子，它利用FileReader类将图像读取为DataURL，并通过将image标签的src属性设置为数据URL来呈现缩略图：
html代码：
<input type="file" id="files" /> <img id="image" />
JavaScript代码：
document.getElementById("files").onchange = function () { var reader = new FileReader(); reader.onload = function (e) { // get loaded data and render thumbnail. document.getElementById("image").src = e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(this.files[0]); };
这里有一篇关于在JavaScript中使用File API的好文章。
以下HTML示例中的代码段会过滤掉用户select的图像，并将所选文件呈现为多个缩略图预览：
function handleFileSelect(evt) { var files = evt.target.files; // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = [ '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', e.target.result, '" title="', escape(theFile.name), '"/>' ].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple /> <output id="list"></output>
在这里，我使用FileReader API来处理jQuery。
Html标记：
<input id="fileUpload" type="file" multiple /> <div id="image-holder"></div>
jQuery的：
在jQuery代码中，首先检查文件扩展名。 即有效的图像文件进行处理，然后将检查浏览器是否支持FileReader API是，然后只处理其他显示受尊重的消息
$("#fileUpload").on('change', function () { //Get count of selected files var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop for each file selected for uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("This browser does not support FileReader."); } } else { alert("Pls select only images"); } });
详细文章：如何在上传之前预览图像，带有Live Demo的jQuery，HTML5 FileReader（）
function handleFileSelect(evt) { var files = evt.target.files; // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = [ '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', e.target.result, '" title="', escape(theFile.name), '"/>' ].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" multiple /> <output id="list"></output>
