图片转换base64编码,点击div的时候选择文件

有时候我们希望文件上传的时候预览图片，下面插件可以实现上传前预览图片 (也可以提取文件的base64编码)

max-height: 140px;max-width: 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="width: 120px; height:140px;max-height: 140px;max-width: 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;width: 200px;">
    <img id="preview" style="width: 120px; height:140px;max-height: 140px;max-width: 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);
        }