fileupload异步上传多个图片

做图片上传很简单，能把简单的事情做到极致，你就变得优秀了。废话不多说，上代码。1.页面<table><tr><td></td> <td height="150" width="300"> <div id="product1"> <input id="coverPicture_url" name="coverPicture" type="hidden" value=""> <img id="coverPicture_img" style="display: none" src="" alt="" width="200px" height="200px"> </div> 封面： <a href="javascript:;" > <input upImg="true" id="fm" name="pic" type="file" data-url="${ctx}/upload/uploadPic"

multiple="multiple" />

</a>
</td>
<td height="150" width="350">
<div id="product2">
<input id="carouselPicture1_url"  name="carouselPicture1"  type="hidden" value="">
<img id="carouselPicture1_img" style="display: none" src="" alt="" width="200px" height="200px">
</div>
轮播图片1：
<a href="javascript:;" >
<input upImg="true"  id="lbtp1"   name="pic" type="file"  data-url="${ctx}/upload/uploadPic"

multiple="multiple" />
</a>
</td>
<td height="150">
<div id="product3">
<input id="carouselPicture2_url"  name="carouselPicture2"  type="hidden" value="">
<img id="carouselPicture2_img" style="display: none" src="" alt="" width="200px" height="200px">
</div>
轮播图片2：
<a href="javascript:;" >
<input upImg="true"  id="lbtp2"   name="pic" type="file"  data-url="${ctx}/upload/uploadPic"

multiple="multiple" />
</a>
</td>
</tr>
<tr>
<td></td>
<td height="150" width="350">
<div id="product4">
<input id="carouselPicture3_url"  name="carouselPicture3"  type="hidden" value="">
<img id="carouselPicture3_img" style="display: none" src="" alt="" width="200px" height="200px">
</div>
轮播图片3：
<a href="javascript:;" >
<input upImg="true"  id="lbtp3"   name="pic" type="file"  data-url="${ctx}/upload/uploadPic"

multiple="multiple" />
</a>
</td>
<td height="150" width="350">
<div id="product5">
<input id="carouselPicture4_url"  name="carouselPicture4"  type="hidden" value="">
<img id="carouselPicture4_img" style="display: none" src="" alt="" width="200px" height="200px">
</div>
轮播图片4：
<a href="javascript:;" >
<input upImg="true"  id="lbtp4"   name="pic" type="file"  data-url="${ctx}/upload/uploadPic"

multiple="multiple" />
</a>
</td>
<td height="150">
<div id="product6">
<input id="carouselPicture5_url"  name="carouselPicture5"  type="hidden" value="">
<img id="carouselPicture5_img" style="display: none" src="" alt="" width="200px" height="200px">
</div>
轮播图片5：
<a href="javascript:;" >
<input upImg="true"  id="lbtp5"   name="pic" type="file"  data-url="${ctx}/upload/uploadPic"

multiple="multiple" />
</a>
</td>
</tr>
</table>

2.脚本
//定义图片组件
var list = [{"fileBtnId":"fm","imgId":"coverPicture_img","urlId":"coverPicture_url"},
{"fileBtnId":"lbtp1","imgId":"carouselPicture1_img","urlId":"carouselPicture1_url"},
{"fileBtnId":"lbtp2","imgId":"carouselPicture2_img","urlId":"carouselPicture2_url"},
{"fileBtnId":"lbtp3","imgId":"carouselPicture3_img","urlId":"carouselPicture3_url"},
{"fileBtnId":"lbtp4","imgId":"carouselPicture4_img","urlId":"carouselPicture4_url"},
{"fileBtnId":"lbtp5","imgId":"carouselPicture5_img","urlId":"carouselPicture5_url"}];
//初始加载
$(function(){
//图片上传初始化
for(var index = 0,l = list.length;index<l;index++){
fileUpload(list[index].fileBtnId,list[index].imgId,list[index].urlId);
}
}）；

//图片上传
function fileUpload(fileBtnId,imgId,urlId){
$('#'+fileBtnId).fileupload({
dataType: 'json',
done: function (e,data) {
$('#'+urlId).val(data.result.url);
$('#'+imgId).css('display','block');
$('#'+imgId).attr('src',data.result.url);
}
});
}

3.Controller(这部分根据自己项目来定)
@Controller
@RequestMapping("/upload")
public class UploadController {

@RequestMapping(value="uploadPic")
public void uploadPic(@RequestParam(required = false) MultipartFile pic,

HttpServletResponse response) throws Exception {
String ext = FilenameUtils.getExtension(pic.getOriginalFilename());

//生成策略
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String format = df.format(new Date());

Random r = new Random();
for(int i = 0 ; i < 3 ;i++){
format += r.nextInt(10);
}

//实例jersey
Client client = new Client();

//保存db
String path = "upload/"+format+"."+ext;

String ip = "http://119.57.156.12:8080/image-web/";

//另一台服务器的请求路径
String url = ip + path;

//设置请求路径
WebResource resource = client.resource(url);

//发送开始
resource.put(String.class,pic.getBytes());

//返回
JsonMapper mapper = new JsonMapper();
Map<String,Object> map = new HashMap<String,Object>();
map.put("url", url);
map.put("path", path);
response.setContentType("text/html");
response.getWriter().write( mapper.toJson(map) );
response.flushBuffer();
}
}
这里边用到的是fileupload插件。使用还要加上必要的脚本文件。
<script type="text/javascript" src="${ctx}/resources/fileupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="${ctx}/resources/fileupload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${ctx}/resources/fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${ctx}/resources/fileupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="${ctx}/resources/easyui/jquery.min.js"></script>

其实还有好多插件支持此功能。