Ajax配合Spring实现文件上传功能代码

Ajax配合Spring实现文件上传功能代码

最近在开发一个可以上传图片到服务器的web表面页面,下面给大家分享需求和实现思路,需要的的朋友参考下吧

由于项目需要,开发一个可以上传图片到服务器的web表单页面。

一、 需求

Web表单页面,可以通过表单上传图片以及其他文字信息。

二、 图片上传的流程

之前没有做过这类页面,通过查询资料。发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径;之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中。

三、 方法

由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传;第二种是先在前台将图片切割为较小的文件,之后使用ajax分别上传图片到服务器,服务器实现对文件的拼接。(方法二适合较大文件的上传)下面我分别对两种方法做介绍。

方法一: 直接上传

1 html页面

 
 
" /> 


 这一部分需要注意的是,form表单的enctype属性必须设置为“multipart/form-data”,在Html5中,如果需要多张图片一起上传,可以在 标签中,增加multiple属性,例如:


2 js

(1)js使用ajax提供的ajaxfileupload.js库。这个库使用起来还是比较方便的,和普通的ajax函数使用方法几乎相同。首先,需要ajaxfileupload.js库文件。这里需要注意,我之前在网上下载了一个ajaxfileupload.js文件不能用,浪费了很长时间,我直接把js库文件粘贴到这里,方便分享。

// JavaScript Document
// ajax file uplaod jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('