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 ...
随机推荐
- 然而，该来的还是来了(Diary)
2017-05-07 LG月赛成功炸掉...发现自己真的好多东西不会啊.对某些知识仅仅有最基础的一点理解啊!连线段树都理解不了怎么办?归并排序(including分治+贪心)全部炸掉啊.感觉自 ...
- QT中的信号槽
只有继承了QObject类的类,才具有信号槽的能力.所以,为了使用信号槽,必须继承QObject. 凡是QObject类(不管是直接子类还是间接子类),都应该在第一行代码写上Q_OBJECT. 不管是 ...
- cogs 9. 中心台站建设。。。
9. 中心台站建设 ★★☆ 输入文件:zpj.in 输出文件:zpj.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] n个城市之间有通讯网络,从这n个城 ...
- Python学习-生成器 - Generator
简单来说,generator是一个能够返回迭代器对象的函数. yield的使用: 在python中,当你定义一个函数,使用了yield关键字时,这个函数就是一个生成器,它的执行会和其他普通的函数有很多 ...
- POJ 2375
BFS+强连通.输出max(缩点后出度为0的点数,缩点后入度为0的点数). #include <cstdio> #include <iostream> #include < ...
- IndexError:string index out of range
IndexError:string index out of range 出现在下标越界的情况,如 item[1],可能为空的时候下标就会越界
- 《编程导论（Java）·2.1.2 啊，我看到了多态》-什么是多态(polymorphism)
1.不明觉厉 很多人学习多态时,会认为. 之所以不明觉厉,由于多态的定义:事物存在的多种表现形态:而后,有人将重载(overload).改写(override).多态变量和泛型归结于同一个术语&quo ...
- 2015年北京大学软件project学科优秀大学生夏令营上机考试---C：单词翻转面试题
题目描写叙述:翻转句子中单词的顺序.但单词内字符的顺序不变.句子中单词以空格符隔开. 为简单起见,标点符号和普通字母一样处理.如:"I am a student."翻转成" ...
- wifi断线问题
近期在项目中,遇到wifi常常断线现象,平台是Android平台,现象是:连接wifi后,长时间播放视频,会出现wifi断开,界面上WiFi图标显示打叉,请问有WiFi方面的行家朋友,有没有办法来检測 ...
- Database Design for Sexbale Forum
Mars March 17, 2015