前端传来的图片并保存_Java实现前端上传文件,和后台交互将保存到服务器的路径回显...

作为一个后端,虽然说一直都是在趟坑,但是 真的是后端的坑一趟就过,但是前端的坑真的是不好踩,先说一下需求,总体实现上传一个Form表单,实现添加或者修改信息,Form表单中有一个图标,实现异步上传图标(文件什么的都可以都是类似的),然后将文件保存到服务器,然后将保存的路径回显回前端,然后提交表单,实现将图标保存的路径保存到数据库.

这是使用框架的组件实现的效果

我只说一下实现文件上传这一部分吧,因为Form表单提交保存数据库这是最基本的操作了;

第一种方法:使用前端operamasks-ui框架,后端使用的是play框架

首先是HTML代码:

标题：

.......

        状态：

正 常  

下线

其余的是一样的,下面写一下上传图标的input

        图标路径：        上传图标：

这个是使用ajax上传的时候可以使用accept属性来限制上传图片的类型,                也可以使用image/*来支持所有类型的上传

下面就说一下这个omFileUpload方法:

这个方法要写在$(document).ready(function() {}中实现加载页面的时候就将其初始化完成:

$(document).ready(function() {

/* 直接上传文件,并判断大小和类型 */

$('#upload_icon').omFileUpload({

action:'/SmartProduct/UploadIcon',

//文件上传与后台交互的路径(相当于ajax请求的url)

swf : '/public/javascripts/operamasks-ui-1.2/swf/om-fileupload.swf',

//文件上传的位置(服务器)

fileExt:'*.jpg;*.png;*.jpeg',    //限制上传图片的类型

fileDesc:'Image Files',    //如果是上传资源文件可以使用Resource Files

method: 'POST',        //请求方式

sizeLimit : 1024*1024,    //限制上传文件的大小                      onComplete:function(ID,fileObj,response,data,event){

//这个是上传完成触发的一个事件

if(response!=null&&response.length>0){     //参数含义写到下面吧

$('#upload_icon_url').val(response);

}

}

});

}

参数:ID- 文件ID

fileObj- 封装了文件的信息的Object对象，包含五个属性：name(文件名)，size(文件大小)，creationDate(文件创建时间)，modificationDate(文件最后修改时间)，type(文件类型)

response- 服务端返回的内容

data- 封装了文件上传信息的Objec