怎样利用ajax实现多个文件上传

<script type="text/javascript">

$(document).ready(function () {

$("#uploadify").uploadify({

'uploader': 'image/uploadify.swf', //uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框

'script': 'Handler1.ashx',// script ： 后台处理程序的相对路径

'cancelImg': 'image/cancel.png',

'buttenText': '请选择文件',//浏览按钮的文本，默认值：BROWSE。

'sizeLimit':999999999,//文件大小显示

'floder': 'Uploader',//上传文扮毕件存放的目录

'queueID': 'fileQueue',/物缺汪/文件队列的ID，该ID与存放文件队列的div的ID一致

'queueSizeLimit': 120,//上传文件个数限制

'progressData': 'speed'罩仔,//上传速度显示

'auto': false,//是否自动上传

'multi': true,//是否多文件上传

//'onSelect': function (e, queueId, fileObj) {

// alert("唯一标识:" + queueId + "\r\n" +

// "文件名：" + fileObj.name + "\r\n" +

1.Spring mvc

a.xml配置：

[html] view plain copy print?

<bean id="multipartResolver"

class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >

<!-- set the max upload size1MB 1048576 -->

<property name="maxUploadSize">

<value>52428800</value>

</property>

<散腊吵property name="maxInMemorySize">

<value>2048</value>

</property>

</bean>

b. 服务器端接收解析

[java] view plain copy print?

public void imgUpload(

MultipartHttpServletRequest multipartRequest,

HttpServletResponse response) throws Exception {

response.setContentType("text/htmlcharset=UTF-8")

Map<String, Object>局樱 result = new HashMap<String, Object>冲侍()

//获取多个file

for (Iterator it = multipartRequest.getFileNames()it.hasNext()) {

String key = (String) it.next()

MultipartFile imgFile = multipartRequest.getFile(key)

if (imgFile.getOriginalFilename().length() >0) {

String fileName = imgFile.getOriginalFilename()

//改成自己的对象哦！

Object obj = new Object()

//Constant.UPLOAD_GOODIMG_URL 是一个配置文件路径

try {

String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(Constant.UPLOAD_GOODIMG_URL)

File _apkFile = saveFileFromInputStream(imgFile.getInputStream(), uploadFileUrl, fileName)

if (_apkFile.exists()) {

FileInputStream fis = new FileInputStream(_apkFile)

} else

throw new FileNotFoundException("apk write failed:" + fileName)

List list = new ArrayList()

//将obj文件对象添加到list

list.add(obj)

result.put("success", true)

} catch (Exception e) {

result.put("success", false)

e.printStackTrace()

}

}

}

String json = new Gson().toJson(result,

new TypeToken<Map<String, Object>>() {

}.getType())

response.getWriter().print(json)

}

//保存文件

private File saveFileFromInputStream(InputStream stream, String path,

String filename) throws IOException {

File file = new File(path + "/" + filename)

FileOutputStream fs = new FileOutputStream(file)

byte[] buffer = new byte[1024 * 1024]

int bytesum = 0

int byteread = 0

while ((byteread = stream.read(buffer)) != -1) {

bytesum += byteread

fs.write(buffer, 0, byteread)

fs.flush()

}

fs.close()

stream.close()

return file

}

2.关于前端代码

a.修改ajaxfileupload.js

先到官网下载该插件.

将源文件的createUploadForm的代码替换如下：

[javascript] view plain copy print?

createUploadForm: function(id, fileElementId, data)

{

//create form

var formId = 'jUploadForm' + id

var fileId = 'jUploadFile' + id

var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>')

if (data) {

for ( var i in data) {

jQuery(

'<input type="hidden" name="' + i + '" value="'

+ data[i] + '" />').appendTo(form)

}

}

for (var i = 0i <fileElementId.lengthi ++) {

var oldElement = jQuery('#' + fileElementId[i])

var newElement = jQuery(oldElement).clone()

jQuery(oldElement).attr('id', fileElementId[i])

jQuery(oldElement).attr('name', fileElementId[i])

jQuery(oldElement).before(newElement)

jQuery(oldElement).appendTo(form)

}

//set attributes

jQuery(form).css('position', 'absolute')

jQuery(form).css('top', '-1200px')

jQuery(form).css('left', '-1200px')

jQuery(form).appendTo('body')

return form

}

第一步高定

b. 页面代码

html：

[html] view plain copy print?

<input type="button" value="添加附件" onclick="createInput('more')" />

<div id="more"></div>

js：这里可以专门写封装类，以及给file加onchange事件判断文件格式。由于时间有限，未修改

[javascript] view plain copy print?

var count = 1

/**

* 生成多附件上传框

*/

function createInput(parentId){

count++

var str = '<div name="div" ><font style="font-size:12px">附件</font>'+

' '+ '<input type="file" contentEditable="false" id="uploads' + count + '' +

'" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button" value="删除" onclick="removeInput(event)" />'+'</div>'

document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str)

}

/**

* 删除多附件删除框

*/

function removeInput(evt, parentId){

var el = evt.target == null ? evt.srcElement : evt.target

var div = el.parentNode

var cont = document.getElementById(parentId)

if(cont.removeChild(div) == null){

return false

}

return true

}

下面是2个修改多file用的js，用于显示和删除，可以于上面的合并精简代码：

[javascript] view plain copy print?

function addOldFile(data){

var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:nonefont-size:12pxcolor:red" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+

' ' + data.name +

'</div>'

document.getElementById('oldImg').innerHTML += str

}

function removeOldFile(evt, id){

//前端隐藏域，用来确定哪些file被删除，这里需要前端有个隐藏域

$("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id))

var el = evt.target == null ? evt.srcElement : evt.target

var div = el.parentNode

var cont = document.getElementById('oldImg')

if(cont.removeChild(div) == null){

return false

}

return true

}

ajax上传文件:

[javascript] view plain copy print?

function ajaxFileUploadImg(id){

//获取file的全部id

var uplist = $("input[name^=uploads]")

var arrId = []

for (var i=0i<uplist.lengthi++){

if(uplist[i].value){

arrId[i] = uplist[i].id

}

}

$.ajaxFileUpload({

url:'xxxxx',

secureuri:false,

fileElementId: arrId, //这里不在是以前的id了，要写成数组的形式哦！

dataType: 'json',

data: {

//需要传输的数据

},

success: function (data){

},

error: function(data){

}

})

}

不太苟同楼上的做法，这种不光耗费服务器资源，也耗费数据库的资源。如果是类似腾讯这种人气的网站。就知道问题了。

说下我在实际中的做法吧。当然我的客户人气没绝晌有那么高。每年顶多几万人。

比如有个图像上传预览。也是要及时预览并上传到服务器端。我用的是uploady上传插件。

第一张图片上传后以用户名命名.JPG保存。第二次上传就判断当前用户的photo【这是册宏册上传图片保存在数据库中】是否存在，如果存在就以用户名#TEMP#.JPG【如果当前用户的photo已是#TEMP#.JPG结尾则以用户名.JPG】保存。如果不存在就依然州宏以用户名.JPG保存。如此互斥。这样只要你不覆盖用户点击保存前你的那张图片，数据库也不会有变动。预览的图片也就永远只有一张。如果你要清理这1万张预览图那也是相当容易的【比如你可以将预览图放在一个临时文件夹中，做个定时任务，一个星期清理一次也差不多了，顶多也就上万张，平时估计几百张就不错了，而实际用户的图片也是以年份/省市/等单独存放，避免一个文件夹过大】。本人项目中的用法，如有问题，请赐教。

---