【下载文档:  Ajax配合Spring实现文件上传功能代码.txt 】

---

Ajax配合Spring实现文件上传功能代码
由于项目需要，开发一个可以上传图片到服务器的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('