如何实现上传图片并保存到数据库及遇到的问题

现在由于人们的生活质量的提高及网络的发达，所以在各大软件中上传个人的头像及其他图片已成为普遍的事情，差不多所有的软件都实现了这个功能，那么他们究竟是怎么做到的呢？

其实并不难，现在我就以一个完整的例子来讲解一下。

先来看一下效果图及结构，再来看一下实现的功能的写法。

效果图：

html上传图片调用python另存到电脑 html上传图片到数据库_数据库


Html：

html上传图片调用python另存到电脑 html上传图片到数据库_正则表达式_02


问题1：如何实现上传图片的功能并把图片显示出来？

步骤：1、先打开file文件表单选择图片；2、创建FileReader对象 ，用正则表达式过滤图片文 件；3、利用改变事件将图片显示出来；4、读取文件，将url绑定到img标签的src属性上。

详细： 1、chooseImageFile方法：

function chooseImageFile(inputFileID) {
      $("#" + inputFileID).click();
 }

2、创建 FileReader 对象，用正则表达式过滤图片：

var imgReader = new FileReader();
//正则表达式 过滤图片文件
regexImageFile=/^(?:image\/jpg|image\/jpeg|image\/png)$/i;

FileReader 对象允许 Web 应用程序来异步读取存储在用户计算机上的文件里面的内容，使 用 File 或者 Blob 对象指定要读取的文件或数据，其中结合 input：file 可以很方便的读取本地文件里面的内容。
3、利用改变事件将图片显示出来：

function showImgToView(inputFileId) {
    //选择图片文件
    var imgFile = $("#" + inputFileId).get(0).files[0];
    //判断上传文件是否为图片格式
    if (!regexImageFilter.test(imgFile.type)) {
          layer.msg("请选择有效的图片文件", { icon: 0, title: "提示",skin:"layui-layer-molv" });
    }
    else {
           //将文件读取为DataURL 
           imgReader.readAsDataURL(imgFile);
    }
 }

readAsDataURL()方法是 FileReader 对象里面的方法，其作用为可以获取 API 异步读取的文件 数据，将图片另存为数据 Url,还可以实现图片上传预览的效果，让用户确认是否就是上传这张 图片，提升用户体验。
4、读取文件

imgReader.onload = function (evt) {
    //将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
    $("#ImgCommodityPicture").attr("src", evt.target.result);
};

问题2： 如何进行提交表单数据？
给保存按钮一个点击事件，进行提交数据，再给form标签一个action行为进行提交表单数据。

//保存新增
function InsertPicture() {
    $("#formCommodity").ajaxSubmit(function (returnJson) {
        //保存成功
        if (returnJson.State) {
            //提示信息
             layer.alert(returnJson.Text, { icon: 1, title: "提示" });
}
else {
             layer.alert(returnJson.Text, { icon: 0, title: "提示" });
}
     });
}

问题3： 如何清空图片？

//清空图片
    function ClearPicture() {
        $("#ImgCommodityPicture").attr("src", "");
    }

问题4： 如何把图片保存到数据库？

html上传图片调用python另存到电脑 html上传图片到数据库_数据库_03


注：在保存数据到数据库的时候我遇到了一个问题，就是虽然图片上传到了显示出来了，但是就是不可以保存到数据库，主要是fileCommodityPicture传过来的值为Null,除了单词写错之外，其实有三种可能会导致传到控制器中没有值，第一种是传到控制器的名字不能与数据库中存放图片的字段对应；第二种是传到控制器的值要与input中的name属性中的名字一致；第三种就是在form标签里面写明是用post请求（method=“post”），否则fileCommodityPicture的值无法传到控制器。

虽然看似简单，但是还是要注意细节问题。