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 ...
随机推荐
- [luogu4159 SCOI2009] 迷路(矩阵乘法)
传送门 Solution 矩阵乘法新姿势qwq 我们知道当边权为1是我们可以利用矩阵快速幂来方便的求出路径数 那么对于边权很小的时候,我们可以将每个点都拆成若干个点 然后就将边权不为1转化为边权为1了 ...
- php unlink()函数使用
最近在写个网站,需要上传图片,如果修改图片,就图片就没有用了,会占用服务器的硬盘资源,所以想到用unlink函数删除旧照片. 问题 : unlink函数只能删除 相对于函数执行文件的相对目录 或 ...
- Codeforces 1106F Lunar New Year and a Recursive Sequence (数学、线性代数、线性递推、数论、BSGS、扩展欧几里得算法)
哎呀大水题..我写了一个多小时..好没救啊.. 数论板子X合一? 注意: 本文中变量名称区分大小写. 题意: 给一个\(n\)阶递推序列\(f_k=\prod^{n}_{i=1} f_{k-i}b_i ...
- cannot find -lGL
解决方法: 以下操作都在root权限下进行! 1.按照提示安装对应的库文件,fedora安装库件的格式:yum install libxxx(你要装的库),如果已经安装GL库,会显示已经安装 Ps:如 ...
- 如何预防SQL注入，XSS漏洞(spring,java)
SQL注入简介 SQL注入是由于程序员对用户输入的参数没有做好校验,让不法分子钻了SQL的空子, 比如:我们一个登录界面,要求用户输入用户名和密码: 用户名: ' or 1=1-- 密码: 点击登录之 ...
- 【ACM】hdu_3782_xxx定律_201308011521
xxx定律Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 【ACM】hdu_1095_A+BVII_201307261740
A+B for Input-Output Practice (VII)Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/327 ...
- nginx配置文件使用
nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; 全局错误日志定义类型,[ debug | info | notice | warn | error | cri ...
- 【数据结构与算法】(二) c 语言链表的简单操作
// // main.c // testLink // // Created by lan on 16/3/6. // Copyright © 2016年 lan. All rights reserv ...
- 实战c++中的vector系列--vector应用之STL的find、find_if、find_end、find_first_of、find_if_not(C++11)
使用vector容器,即避免不了进行查找,所以今天就罗列一些stl的find算法应用于vector中. find() Returns an iterator to the first element ...