图片上传

项目要求：实现图片上传，一行四张图片。
实现方法：一个imglist存放已上传的图片src，一个defaultlist 循环默认图片，循环次数为 4-imglist.size();
点默认图片执行onclick(),弹出图片选择框，选择完图片 执行onchange() 方法，调用ajaxupload 方法
把图片file传递到后台action。
前段jsp页面：

<div class="container-fluid">        <c:forEach var="image" items="${imglist }" varStatus="idx">            <td>                <img id="${image.id}" alt="${image.id}" width="120" height="120" src="<%=basePath%>${image.src}"  onmouseover="showDeleteDiv('${image.id}');" onmouseout="imgOnmouseout(),hideDeleteDiv('${image.id}');">             </td>         </c:forEach>          <c:forEach begin="${i}" end="3" step="1" varStatus="idx">            <img src="${pageContext.request.contextPath}/img/drugstore/default.png" id="img" onclick="upload()" ></img>            <span style="display: none"><input  name="advImage" id="advImage" type="file" style="opacity: 0;"/></span>            <input type="hidden" name="type" value="1" id="type1">         </c:forEach>    </div>

js代码：

function upload(){        document.getElementById("advImage").click();        }        $("input[name='advImage']").change(function(){            // 检查图片格式             var f=document.getElementById("advImage").value;                if(!/.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f))                {                    alert("图片类型必须是.jpeg,jpg,png中的一种")                    return false;                }         $.ajaxFileUpload(            {url:"${pageContext.request.contextPath }/img/upload.do",            secureuri:false,            dataType:"text",            fileElementId:"advImage",             data: {//图片类型为1 即 店铺图片                "type": $("#type1").val(),              },              success:function (data) {                 //上传成功后，直接跳出截图框，使用imgAreaSelect插件                  window.location.reload();            },            error:function (data, status, e) {                alert("图片上传失败,请重新选择图片");            }        });    });

后台java代码：

@Controller@RequestMapping("/img")public class uploadimg{    @Autowired    private BaseService baseService;    @RequestMapping("/upload.do")      public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;            MultipartFile image=null;            if(multipartRequest.getFile("advImage")==null||"".equals(multipartRequest.getFile("advImage"))){                image = multipartRequest.getFile("aptitude");            }else if(multipartRequest.getFile("aptitude")==null||"".equals(multipartRequest.getFile("aptitude"))){                image = multipartRequest.getFile("advImage");            }            String type=request.getParameter("type");            response.setCharacterEncoding("utf-8");            //response.setHeader("ContentType", "json");            response.setContentType("application/json");            if(image!=null){                long time = System.currentTimeMillis();                String logImageName = image.getOriginalFilename();                  String file_ext = logImageName.substring(logImageName.lastIndexOf(".") + 1);                //  System.out.println("[fileType:"+fileType+"][fileName:"+fileName+"][fileSize:"+fileSize+"]");                //获得项目的跟目录                String realPath = request.getSession().getServletContext().getRealPath("/");                String realPathLast = realPath+"img\\drugstore\\";                String saveName=time+"."+file_ext;                String src="img/drugstore/"+saveName;                SaveFileFromInputStream(image.getInputStream(),realPathLast,saveName);                //获得药店用户名                String account=(String) request.getSession().getAttribute("account");                //查找药店id                String stat_find="com.yksStore.model.drugstore.findid";                Map<String, String> map1=new HashMap<String, String>();                map1.put("account", account);                int drugstore_id= (Integer) baseService.find(stat_find, map1);                String stat="com.yksStore.model.drugstore.inserimg";                Map map=new HashMap();                map.put("drugstore_id", drugstore_id);                map.put("src", src);                map.put("type", type);                baseService.insert(stat, map);                response.setCharacterEncoding("utf-8");                response.setContentType("text/html;charset=UTF-8");                //输出                try {                    response.getWriter().print(src);                } catch (IOException e) {                    // TODO Auto-generated catch block                    e.printStackTrace();                }               }            return null;        }    public void SaveFileFromInputStream(InputStream inputStream,String path,String saveFilename) throws IOException{        FileOutputStream outputStream = new FileOutputStream(path+"/"+saveFilename);        byte[] buffer = new byte[1024*1024];        int bytesum = 0;        int byteread = 0;        while ((byteread=inputStream.read(buffer))!=-1){            bytesum+=byteread;            outputStream.write(buffer, 0, byteread);            outputStream.flush();        }        outputStream.close();        inputStream.close();    }}

用到的js：ajaxfileupload.js，ajaxfileupload.css， jquery.min.js