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[0]; 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="12"> <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[0]; 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;
});
