用file标签实现多图文件上传预览

js 代码：

<script>
 //下面用于多图片上传预览功能
 function setImagePreviews(avalue) {
 var docObj = document.getElementById("files");
 var dd = document.getElementById("preview");
 dd.innerHTML = "";
 var fileList = docObj.files;
 for (var i = 0; i < fileList.length; i++) {
 dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
 var imgObjPreview = document.getElementById("img"+i);
 if (docObj.files && docObj.files[i]) {
 //火狐下，直接设img属性
 imgObjPreview.style.display = 'block';
 //控制缩略图大小
 imgObjPreview.style.width = '70px';
 imgObjPreview.style.height = '70px';
 //imgObjPreview.src = docObj.files[0].getAsDataURL();
 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
 }
 else {
 //IE下，使用滤镜
 docObj.select();
 var imgSrc = document.selection.createRange().text;
 alert(imgSrc)
 var localImagId = document.getElementById("img" + i);
 //必须设置初始大小
 localImagId.style.width = "70px";
 localImagId.style.height = "70px";
 //图片异常的捕捉，防止用户修改后缀来伪造图片
 try {
  localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
 }
 catch (e) {
  alert("您上传的图片格式不正确，请重新选择!");
  return false;
 }
 imgObjPreview.style.display = 'none';
 document.selection.empty();
 }
 }
 return true;
 }
 </script>

HTML代码：

<form method="post" enctype="multipart/form-data">
 <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="files" name="files" multiple onchange="javascript:setImagePreviews();" />
 <input type="button" id="upload" value="上传" />
 <div id="preview">
 </div>
</form>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 基于HTML5的可预览多图片Ajax上传

    基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇"Ajax Upload多文件上传插件"的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中

  • JavaScript File API文件上传预览

    JavaScript File API文件上传预览

    对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

  • jsp中点击图片弹出文件上传界面及预览功能的实现

    花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • JavaScript File API实现文件上传预览

    JavaScript File API实现文件上传预览

    一.概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽

  • js 上传文件预览的简单实例

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div id="test-image-preview" style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat

  • PHP仿微信多图片预览上传实例代码

    生产图片区域,上传按钮#btn可替换自己想要的图片 <ul id="ul_pics" class="ul_pics clearfix"> <li><img src="logo.png" id="btn" class="img_common" /></li> </ul> plupload上传 var uploader = new plupload.U

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

  • 用file标签实现多图文件上传预览

    js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("files"); var dd = document.getElementById("preview"); dd.innerHTML = ""; var fileList = docObj.files; for (var i

  • H5手机端多文件上传预览插件

    H5手机端多文件上传预览插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var para = { multiple: true, filebutton: ".filePicker", uploadButton: null, url: "/home/MUploadImg", filebase: "mfile",//mvc后台需要对应的

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

  • 教你3分钟利用原生js实现有进度监听的文件上传预览组件

    教你3分钟利用原生js实现有进度监听的文件上传预览组件

    前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等. 组件设计架构如下: 涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围 自执行函数 file API:对文件进行读取,解析,监控文件事件 DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合

  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • JavaScript代码实现txt文件的上传预览功能

    今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt

  • vue excel上传预览和table内容下载到excel文件中

    excel上传预览 这里会用到 npm i element-ui npm i xlsx 在vue的template中写上,排版和css看个人需求 <div> 选择文件 <input type="file" d="file_input" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadshe

随机推荐