图片回显(上传前预览)功能

    xiaoxiao2025-08-12  11

    一、html代码

    <input style="margin-left:9px;" type="file" name="file" class="file" id="file" size="28" οnchange="fileChang(event)" />

    <div style="width:282px;height: 281px;margin-top:-20px;"> <img id="bannerImg" name="bannerImg" src="${banner.bannerImg}" alt="广告图片" /> </div>

    二、js代码

    <script>

    function fileChang(e){ for (var i = 0; i < e.target.files.length; i++) {                       var file = e.target.files.item(i);                     if (!(/^image\/.*$/i.test(file.type))) {                           continue; //不是图片 就跳出这一次循环                       }                       //实例化FileReader API                       if(file.size<500*1024){                  var freader = new FileReader();                    freader.readAsDataURL(file);                   freader.onload = function(e) {                       $("#bannerImg").attr("src",e.target.result);                      //该code是获得图片属性,可以删除                       //var img = document.getElementById("bannerImg");                       //img.src = e;                       //alert("Width:"+img.width+", Height:"+img.height+",size:"+file.size);                 }                 }else{                     alert("图片大小必须小于500K");

                        $("#file").val("");                }             } }

    </script>

    转载请注明原文地址: https://ju.6miu.com/read-1301669.html
    最新回复(0)