用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 = ; 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>
文章参考:http://www.jq22.com/jquery-info833
用file标签实现多图文件上传预览的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)
<body> <div class="box"> <div class="container"> <ul> &l ...
- React + js-xlsx构建Excel文件上传预览功能
首先要准备react开发环境以及js-xlsx插件 1. 此处省略安装react安装步骤 2.下载js-xlsx插件 yarn add xlsx 或者 npm install xlsx 在项目中引入 ...
- PHP文件上传预览
主页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- h5图片上传预览
项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- IDEA Properties中文unicode转码问题
在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码.如下 在project settings - File Encoding,在标红的选项上打上勾,确定即可 效果图 ...
- error:将字符串转换为 uniqueidentifier 时失败
sql server查询中出现 将字符串转换为 uniqueidentifier 时失败异常 原因为id设置为uniqueidentifier 字段,在where查询时需要做转换cast(id as ...
- iTextSharp 使用详解(转) 感谢原著作者 .
TextSharp是一个生成Pdf文件的开源项目,最近在项目中有使用到这个项目,对使用中的经验作一个小结. ITextSharp中相关的概念: 一.Document 这个对象有三个构造函数: 隐藏行号 ...
- MySQL 数据库--SQL语句优化
explain查询和分析sql 开发中,为满足一业务功能,使用mysql书写sql时,一条sql往往有多种写法,那么我们就需要选择执行效率比较高的sql. 因此要比较分析sql的执行过程,且同一条sq ...
- c#listbox使用详解和常见问题解决
关于ListBox ListBox是WinForm中的 列表 控件,它提供了一个项目列表(一组数据项),用户可以选择一个或者多个条目,当列表项目过多时,ListBox会自动添加滚动条,使用户可以滚动查 ...
- 第九次,mp3
- CentOS7.4 Keepalived+LVS 负载均衡 后台节点健康检查
主机信息 VIP 10.10.10.55 LVS01 10.10.10.59 Web01 10.10.10.60 Web02 10.10.10.61 一.apache简单配置 1.(10.10.10. ...
- 在python命令行执行sudo命令
def test(): sudoPassword = 'test' command = '/opt/lampp/lampp stopmysql' str = os.system('echo %s|su ...
- HTTP协议图--HTTP 协议报文结构
1.HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文.请求端(客户端)的 HTTP 报文叫做请求报文:响应端(服务器端)的叫做响应报文.HTTP 报文本身是由多行(用 CR[car ...
- Scala模式匹配和样例类
Scala有一个十分强大的模式匹配机制,可以应用到很多场合:如switch语句.类型检查等.并且Scala还提供了样例类,对模式匹配进行了优化,可以快速进行匹配. 1.字符匹配 def mai ...