有时候我们希望文件上传的时候预览图片，下面插件可以实现上传前预览图片 (也可以提取文件的base64编码)
max-height: 140px;max- 120px;可以指定图片的最大宽度和高度
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery.js" type="application/javascript;charset=utf-8"></script> <style> </style> </head> <body> <!--src可以指定一个默认的背景图片--> <img id="preview" style=" 120px; height:140px;max-height: 140px;max- 120px;" src=""> <div class="btn upload">上传头像<input type="file" name="image_file" id="image_file" class="upload_pic" onchange="fileSelected('preview','image_file');"></div> <!--显示base64编码--> <input type="text" id="hidden_photo_base64" /> <script> // common variables var iBytesUploaded = 0; var iBytesTotal = 0; var iPreviousBytesLoaded = 0; var iMaxFilesize = 1048576; // 1MB var oTimer = 0; var sResultFileSize = ''; function fileSelected(a, b) { var oFile = document.getElementById(b).files[0]; // filter for image files var rFilter = /^(image/bmp|image/gif|image/jpeg|image/png|image/tiff)$/i; if (!rFilter.test(oFile.type)) { document.getElementById('error').style.display = 'block'; return; } // get preview element var oImage = document.getElementById(a); console.log(a); // prepare HTML5 FileReader var oReader = new FileReader(); oReader.onload = function(e) { oImage.src = e.target.result; $("#hidden_photo_base64").val(e.target.result); }; // read selected file as DataURL oReader.readAsDataURL(oFile); } </script> </body> </html>
效果:
有时候我们希望点击一个div的时候就可以实现选择图片的功能，也就是点击某个div的时候选择图片
思路:我们将type="file"的input隐藏掉，同时在div的点击事件中触发input的点击事件即可。
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery.js" type="application/javascript;charset=utf-8"></script> <style> </style> </head> <body> <!--src可以指定一个默认的背景图片--> <div onclick="javascript:$('#image_file').click();" style="height: 200px; 200px;"> <img id="preview" style=" 120px; height:140px;max-height: 140px;max- 120px;" src=""> </div> <input type="file" name="image_file" id="image_file" class="upload_pic" onchange="fileSelected('preview','image_file');" style="display: none;"/> <input type="text" id="hidden_photo_base64" /> <script>// common variables var iBytesUploaded=0; var iBytesTotal=0; var iPreviousBytesLoaded=0; var iMaxFilesize=1048576; // 1MB var oTimer=0; var sResultFileSize=''; function fileSelected(a, b) { var oFile=document.getElementById(b).files[0]; // filter for image files var rFilter=/^(image/bmp|image/gif|image/jpeg|image/png|image/tiff)$/i; if(!rFilter.test(oFile.type)) { document.getElementById('error').style.display='block'; return; } // get preview element var oImage=document.getElementById(a); console.log(a); // prepare HTML5 FileReader var oReader=new FileReader(); oReader.onload=function(e) { oImage.src=e.target.result; $("#hidden_photo_base64").val(e.target.result); } ; // read selected file as DataURL oReader.readAsDataURL(oFile); }</script> </body> </html>
结果:
触发一个元素的点击事件的时候有 jQueryEle.click();
第二种触发的办法是: jQueryEle.trigger('click');
补充:今天想着用input限定文件类型以及前台获取文件名等操作
<div class="layui-input-inline"> <input type="text" onclick="$('#videoFile').click();" lay-verify="required" autocomplete="off" class="layui-input" /> <!--隐藏的div --> <input type="file" name="file" id="videoFile" style="display: none;" onchange="checkfile(this)"/> </div>
JS获取文件内容:
function checkfile(obj){ var files = $(obj).prop("files"); var file = files[0]; console.log(files); }
console控制台查看可以获取到的文件信息如下:(重要的参数有:name、size、type)
于是可以用input的 accept="video/*" 属性限制文件类型是视频类型，并且在选中文件之后显示文件名:
<div class="layui-input-inline"> <input type="text" onclick="$('#videoFile').click();" lay-verify="required" autocomplete="off" class="layui-input" /> <!--隐藏的div --> <input type="file" name="file" accept="video/*" id="videoFile" style="display: none;" onchange="checkfile(this)"/> </div>
function checkfile(obj){
var files = $(obj).prop("files");
var file = files[0];
var fileName = file.name;
$("#videoFileNameDisplay").val(fileName);
}