利用JS脚本来进行图片编译处理，方便数据库存储图片

友情提示，如果做图片上传方便可以使用图片上传，利用图片编译会增加数据库负载

• 在这里仅限于自己学习记录与分享学习，如若有错，敬请留言，一定修改
• 对于编程刚开始学习的朋友来说，尤其是对于做web开发的朋友，我们都知道，在图片处理上一直是一大难题，经常是，不知所措，保存图片，路径需要频繁的去试探，怎么写才对。
• 今天我要说的是，在小型的程序中，如果图片不是非常大，数据库存储没有问题，可以采用直接将图片进行六十四位转码进行保存，方便了开发，避免了图片无处寻找的麻烦

• 仅限于小型工程项目，大型项目不建议使用，还要注意数据库字段长度问题，这一字段一般设置成max
• 即使这样也不能图片过大，最大可容量，有待考证，大概是不能超过5M

\         <div class="box" style="width:210px;height:210px;border:5px solid #000; margin-top:-3%">
         <img src="" alt="" width="200" height="150" id="Image"  />
             <input type="text" value=""  id="q" />
         <input type="file" id="Picture" hidden onchange="loadImgToEimg('Picture')"  />
        <script>
            var imgReader = new FileReader();
            //文件读取 onload事件
            imgReader.onload = function (evt)
            {
                $("#Image").attr("src", evt.target.result);//绑定新增图片
               $("#q").attr("value", evt.target.result);//为id等于q的控件进行赋值
            }
            function loadImgToEimg(imageFileId)
            {
                var imgFile = $("#" + imageFileId).get(0).files[0];//获取选择的图片
                imgReader.readAsDataURL(imgFile);//加载到img标签中
            }
        </script>

            </div>

在这里，利用id属性来绑定控件给控件进行赋值操作
如有侵权，请联系作者，本文仅供分享与记载学习经过