图片上传

项目要求：实现图片上传，一行四张图片。
实现方法：一个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