js之上传文件多图片预览

多图片上传预览功能也是现在非常常用的

下面是html代码:

<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">//下面用于多图片上传预览功能function setImagePreviews(avalue) {var docObj = document.getElementById("doc");var dd = document.getElementById("dd");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 = '150px';imgObjPreview.style.height = '180px';//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 = "150px";localImagId.style.height = "180px";//图片异常的捕捉，防止用户修改后缀来伪造图片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></head><body><div style="margin :0px auto; width:990px;"><input type="file"  name="file" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" /><div id="dd" style=" width:990px;"></div></div></body></html>

js之上传文件多图片预览相关推荐

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
PHP将word文件转为图片预览
开发中遇到一个需求,需要在线预览word文件,在网上找到的解决方案有几种,在些做一下归类. 一.在线调用API接口直接预览 1. 微软的接口 https://view.officeapps.live ...
基于Mongodb的文件上传下载，图片预览
1.依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b ...
使用pdf.js实现pdf文件的在线预览（有码源）
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/ 最近做移动项目(H5)时遇到一个需求,就是在线预览pdf文件.其实本来使用window.open()就可以实现了 ...
微信小程序接收二进制流文件（图片预览，文件打开）
下面通过downloadOaFile接口获取到二进制流,即res.data 注意!!!直接用downloadOaFile获取的二进制流文件在写入时会导致文件损坏,必须在uni.request对象的属性 ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
适用于各浏览器支持图片预览，无刷新异步批量上传js插件(2)
之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...

js之上传文件多图片预览

js之上传文件多图片预览相关推荐

最新文章

热门文章