上传前显示图像预览

在我的HTML表单中,我input了types文件,例如:

<input type="file" multiple> 

然后通过点击inputbutton来select多个文件。 现在我想在提交表单之前显示所选图像的预览。 如何在HTML 5中做到这一点?

3 Solutions collect form web for “上传前显示图像预览”

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> 
  • 计算resize的图像大小比例
  • 通过Javascript获取图像的平均颜色
  • 简单而快速的方法来比较图像的相似性
  • 从图像中删除白色背景,并使其透明
  • cv2.imshow命令在opencv-python中无法正常工作
  • 只有PNG支持透明度,这是真的吗?
  • 使用ImageIO.write jpg文件的问题
  • 图像分割使用Mean Shift解释