hTML5 多图上传预览

<p>
<label>请选择一个文件:</label>
<input type="file" id="file" multiple="multiple" onchange="readAsDataURL()"/>
</p>
<div id="result" name="result"></div>

  

<script>    var result=document.getElementById("result");
  var file=document.getElementById("file");  

  function readAsDataURL(){
    var file = document.getElementById("file").files;
    var result=document.getElementById("result");  

    for(i = 0; i< file.length; i ++) {
      var reader  = new FileReader();
      reader.readAsDataURL(file[i]);
      reader.onload=function(e){
	    //多图预览
	    result.innerHTML = result.innerHTML + ‘<img src="‘ + this.result +‘"  />‘;
      }

      }

   }  

</script>

  

时间: 2024-11-16 08:26:52

hTML5 多图上传预览的相关文章

jquery多图上传预览

html部分 <form method="post" action="" id="passForm" enctype="multipart/form-data" multipart=""> <div id="Pic_pass"> <p style="font-size: 20px;font-weight: bold;">请上传护照详

js 移动端 多图上传 预览 传给后端

HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文件,根据 W3C 的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取.下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result 属性中. 方法名 参数 描述 abort none 中断读取 readAsBinaryString

HTML5图片上传预览

HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. 也就

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

1 //plupload 集成 2 Ext.define('ux.plup.File', { 3 extend: 'Ext.form.field.Text', 4 xtype: 'plupFile', 5 alias: ['widget.plupFile'], 6 requires: ['Ext.form.trigger.Component', 'Ext.button.Button', 'Ext.window.Toast'], 7 //plup对象 8 uploader: null, 9 //上

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

图片上传预览

例1: 1.先创建一个file表单域,我们需要用它来浏览本地文件. <form name="form1" id="form1" method="post" action="upload.php"> <input type="file" name="file1" id="file1" /> </form> 2.试下效果: 判断文件类型

Javascript之图片上传预览

使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来生成本地图片预览图的. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <