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>其实还有好多插件支持此功能。