js预览上传图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img {
width: 200px;
height: 200px;
}
#preview {
border: 1px solid #000;
margin-left: 88px;
margin-top: -15px;
}
</style>
</head> <body>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>轮播图
</label>
<input type="file" onchange="preview(this)" />
</div>
<div style="margin-bottom: 15px; position: relative;">
<label style="padding: 9px 15px;">
缩略图
</label>
<div id="preview"></div>
</div>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>链接
</label>
<input type="text" />
</div>
<div style="margin-bottom: 15px; clear: both">
<label style="padding: 9px 15px;">
<span style="color: red;">*</span>描述
</label>
<input type="text" />
</div>
<div>
<input type="button" value="增加" id="tj">
</div> <script type="text/javascript">
document.getElementById("tj").onclick = function(){ alert("添加按钮事件!"); };
function preview(file) {
//输出数据
//console.log("12312000111222");
//console.log(file); //<input type="file" onchange="preview(this)">
//console.log(file.files);//FileList {0: File(88977), length: 1}
//console.log(file.files[0]);//File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …}
//-- var prevDiv = document.getElementById('preview');//获取这个div对象 console.log(file.files && file.files[0]); //File(88977) {name: "QQ截图20180323131837.png", lastModified: 1521782319792, lastModifiedDate: Fri Mar 23 2018 13:18:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 88977, …} if (file.files && file.files[0]) { //--检测浏览器是否支持Filereader
if(window.FileReader) { var fr = new FileReader(); // add your code here }
else { alert("Not supported by your browser!"); }
//--
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
js检测文件 带预览图片
<div class="testInput">
<p><input type="file" id="input-file" multiple="multiple" /></p>
<p id="info"></p>
<p id="preview" style="width: 400px; height: 500px;"></p>
</div> <script type="text/javascript">
window.onload = function () {
var input = document.getElementById('input-file'), //获得元素对象 ==file
info = document.getElementById('info'),
preview = document.getElementById('preview'); input.addEventListener('change', function () { //绑定一个change事件
preview.style.backgroundImage = '';
if (!input.value) {
info.innerText = '没有选择文件';
return false;
}
//--获得首个文件
var file = input.files[];
info.innerText = '文件名：' + file.name + '<br>'
+ '文件大小：' + file.size + '<br>'
+ '最后修改时间：' + file.lastModifiedDate;
//--//-- //--判断文件格式
if (file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/gif') {
var p = document.createElement('p');
p.innerText = '不是有效的图片文件格式，请重试！';
info.appendChild(p);
return false;
}
//--//-- //--预览图片
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var data = e.target.result;
preview.style.backgroundImage = 'url(' + data + ')';
}
//--//--
})
} </script>
<div>
<input id="File1" type="file" />
<br />
<img id="img1" />
<span id="fn"></span>
<span id="fs"></span>
</div>
<script>
$(function () {
$("#File1").on("change", function () { //绑定内容改变事件
var file = this.files[0];//获得文件
if (this.files && file) {
var reader = new FileReader(); //文件读取API
reader.onload = function (e) {
$("#img1").attr('src', e.target.result);//设置img路径
$("#fn").text(file.name);
$("#fs").text(file.size + "bytes");
}
reader.readAsDataURL(file);//使用base - 64进行编码 加入文件
}
});
})
</script>
<td colspan="">
<div class="layui-form-item">
<label class="larry-form-label">图片</label>
<div class="larry-input-block">
<div class="layui-upload">
<input type="file" style="display:none;" name="file" id="upload1">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
</div> </div> </td>
//预览图片
document.getElementById("test1").onclick = function () {
document.getElementById('upload1').click();
}
document.getElementById('upload1').onchange = function () {
var file = this.files[]; if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function (e) {
//document.getElementById(imgId).src = e.target.result;
$('#demo1').attr('src', e.target.result); //图片链接（base64）
}
fr.readAsDataURL(file);
}
}
//post请求
<script>
var myxhr = HandleHelper.MyXhr;
var isclick = true;
function post_test(type, callback) {
if (isclick) {
isclick = false;
//---
switch (type) {
case "submit":
var posturl = "/Backstage/PersionManage/Edit";
var formData = myxhr.get_InputToformData();
myxhr.mypost(posturl, 'json', formData, function (data) {
callback(data);
});
break;
} //---
setTimeout(function () {
isclick = true;
}, 500);
}
}
</script>
forms.on('submit(userAdd)', function (data) {
post_test("submit" ,function (res) {
if (res.success) {
larryms.msg(res.msg, { icon: 1, time: 800 }, function () {
parent.layer.close(curIfr);
parent.table.reload('userMange', {});
});
} else {
larryms.msg(res.msg);
}
});
return false;
});
js预览上传图片的更多相关文章
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- html5 ajax多图片可预览上传图片
最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...
- [pdf.js]预览pdf时，中文名称乱码的问题
在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...
- 前端使用pdf.js预览pdf文件
现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...
- 使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
- 前端使用pdf.js预览pdf文件,超级简单
现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- js 压缩 预览 上传图片
com.js export const compressImage=function (files,fn,preCallbackFn,i) { let newfile = files.files[0] ...
- JS预览图像将本地图片显示到浏览器上的代码
js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
随机推荐
- 洛谷P1115 最大子段和【dp】
题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一行是一个正整数NN,表示了序列的长度. 第二行包含NN个绝对值不大于1000010000的整数A_iAi ...
- Shell入门基础
Shell的Helloworld #!/bin/bash echo "helloworld taosir" 执行方式 方式一:用 bash 或 sh 的相对或绝对路径(不用赋予脚本 ...
- js中三个默认方法call，applay，bind
这三个都是函数自带的方法(Function.prototype),这三个方法都能够改变函数内部 this的指向, call //call方法接收三个参数,第一个是this指向,第二个,三个是传递给函数 ...
- BALNUM - Balanced Numbers
BALNUM - Balanced Numbers Time limit:123 ms Memory limit:1572864 kB Balanced numbers have been used ...
- 纪录:Solr6.4.2+Flume1.7.0 +morphline+kafka集成
当前大多数企业版hadoop的solr版本都还停留在solr4.x,由于这个版本的solr本身的bug较多,使用起来会出很多奇怪的问题.如部分更新日期字段失败的问题. 最新的solr版本不仅修复了以前 ...
- Tomcat日志配置远程Syslog采集
http://blog.csdn.net/leizi191110211/article/details/51593748
- 阿里巴巴集团2014年校园招聘系统project师北京笔试题
第一部分 单选题(前10题,每题2分;后10题,每题3分;共50分.选对得满分,选错倒扣一分,不选得0分.) 1.字符串"alibaba"有 个不同的排列. A. 5040 B. ...
- likely, unlikely的作用
在项目中看到了likely.unlikely宏的使用, 一直不是非常清楚它们的作用,所以就深究下. likely表示被測试的表达式大多数情况下为true, unlikely则表示相反. 两个宏定义: ...
- 初中级DBA必需要学会的9个Linux网络命令，看看你有哪些还没用过
笔者不久前写了一篇文章<做DBA必须学会,不会会死的11个Linux基本命令>,博文地址为:http://blog.csdn.net/ljunjie82/article/details/4 ...
- Ralink5350开发环境搭建
一.安装虚拟机(Oracle VM VirtualBox 或 VMware Workstation) 二.在虚拟机中安装linux操作系统(当前使用的是Ubuntu1204桌面版) 三.配置linu ...