web图片或者上传

来源：互联网发布：电信机顶盒装软件编辑：程序博客网时间：2024/05/17 02:35

1.首先先来了解一下数据库存储图片或者文件的归纳：

1.1 把图片或文件以二进制的方式存储在数据库中，mysql有blob字段，oracle有blob和bfile类型

1.2 图片或文件存储在磁盘上，数据库字段中保存的是图片路径

2. 现在我们来从前端开始介绍：

前端我们使用JQuery的ajaxfileupload插件进行异步上传文件，它的语法如下：

$.ajaxfileupload([options]);

options的参数如下：

1.url: 上传处理程序地址

2.fileElementId: 需要上传的文件域的id,即<input type="file" >的ID。

3.secureuri: 是否启用安全提交，默认为false.

4. dataType: 服务器返回的数据类型。例如，json,xml,html,script等。

5. succeess: 成功提交后自动执行的处理函数，参数data就是服务器返回的数据。

6.error: 提交失败自动执行的处理函数。

7.data:自定义参数，这个参数比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。

8.type:当要提交自定义参数时，这个参数要设置成post.

错误的提示：

1.SyntaxError:missing;before statement错误；

如果出现这个错误就需要检查url路径是否可以访问。

2.SyntaxError:syntax error.错误

如果出现这个错误就需要检查处理提交操作的服务后台处理程序是否存在语法错误。

3.SyntaxError:invalid propertiy id错误

如果出现这个错误就需要检查文本域属性ID是否存在

4.SyntaxError:missing } in xml expression错误

如果出现这个错误就需要检查文件的name是否一致或者不存在

5.其他自定义错误，大家可以使用变量$error直接打印的方法检查各参数是否正确，这种方法显然比上面的方便多了

方法：

1.首先引进js

注意顺序不能搞错了。

2.HTML代码：

<body>    <p><input type="file" id="file1" name="file" /></p>    <input type="button" value="上传" />    <p><img id="img1" alt="上传成功啦" src="" /></p></body>

3.ajax代码：

$.ajaxFileUpload({
    url : '/SysWeb/ofrShow/addOfrShowInfo.json?file='+file+'&resData='+$.toJSON(resData),
    secureuri : false,//是否启用安全提交
    fileElementId : 'file1',//file标签的Id
    dataType : 'json',
    success : function(data,status){
     if(data!=null&&status=='success'&&data!=false){
      art.dialog.message('succeed',$.i18n.prop('MSG_ADD_SUCCESS'), function() {
       window.location.href = "/SysWeb/prod/ofrShowManage/ofr_show_list.html";
      });
     }

    },
    error : function(data, status, e){
     art.dialog.message('error',$.i18n.prop('MSG_ADD_FAIL'),null);
     $("#addOfrShowInfoBtn").prop('disabled',false);
    }
   });

4.后台代码：

public int addPicBlob(Map requestMap) throws IOException{
  InputStream in=null;
  in = (InputStream)requestMap.get("PIC_DATA");
  byte[] b = FileCopyUtils.copyToByteArray(in);
  Map parametermap=new HashMap();
  if (b == null || b.length == 0) {
   return 0;
  }
  parametermap.put("PIC_DATA",b);
  parametermap.put("OFR_SHOW_ID",requestMap.get("OFR_SHOW_ID"));
  this.baseService.update(null, "OFR.updateOfrShowPic", parametermap);//该函数调用Dao中的insert_test函数，该函数对应mapper中insert_test语句
  return 1;
}

先获得图片域的值，然后将图片域的值转化为二进制数据，最后插入数据库

这样就把文件或者图片上传成功了

0 0