<!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;
});