1

使用表單action 屬性 直接訪問後臺，

後臺是servlet

後臺方法入參：protected void doPost(HttpServletRequest request, HttpServletResponse response)

方法中上傳的檔案處理：（這裡只寫了關鍵程式碼）

//解析請求之前先判斷請求型別是否為檔案上傳型別
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);

if(isMultipart==true){
            //建立檔案上傳核心類 
            FileItemFactory factory = new
 
 DiskFileItemFactory(); // 例項化一個FileItem工廠,用來配置上傳元件ServletFileUpload
            ServletFileUpload upload = new ServletFileUpload(factory); // 用以上工廠例項化上傳元件
            try{
                //處理表單請求
                List<FileItem> items = upload.parseRequest(request);
                Iterator<FileItem> iter = items.iterator();
                
 
while(iter.hasNext()){
                    FileItem item = (FileItem)iter.next();
                    if(item.isFormField()){// 如果是普通表單控制元件 
                        fieldName = item.getFieldName();// 獲得該欄位名稱
                        if(fieldName.equals("title")){
                            news.setTitle(item.getString(
 
"UTF-8"));//獲得該欄位值 
                        }else if(fieldName.equals("categoryId")){
                            news.setCategoryId(Integer.parseInt(item.getString()));
                        }
                    }else{// 如果為檔案域
                        String fileName = item.getName();// 獲得檔名(全路徑)
                        if(fileName != null && !fileName.equals("")){
                            File fullFile = new File(fileName);
                            File saveFile = new File(uploadFilePath,fullFile.getName());//將檔案儲存到指定的路徑
                            item.write(saveFile);
                            uploadFileName = fullFile.getName();
                            news.setPicPath(uploadFileName);
                            bUpload = true;
                        
                        }
                    
                    }
                }
            }catch(Exception e){
                e.printStackTrace();
            }
            
        }    
        System.out.println("上傳成功之後的檔名：" + news.getPicPath());
        //呼叫後臺的方法，將新聞資訊插入資料庫中
        News_detilService news_detilService = new News_detilServiceImpl();
        bRet = news_detilService.addNews(news);

2

前臺使用ajax 取得表單，直接把表單放入FormData()物件中表單傳送過來

後臺使用springMvc 處理

前端程式碼：（只寫了關鍵程式碼！）

js:

$("#addUser").click(function(){
            //var form=$("#form1");

//使用js 獲取表單，在ajax中直接入參傳後臺
            var form = new FormData(document.getElementById("form1"));
            $.ajax({
                type:"POST",
                url:"../adduserSave",
                data:form,
                async: false,  
                cache: false,  
                    contentType: false,  
                processData: false,
                dataType:"json",
                success:function(data){
           //      省略成功的處理
                }
            })

springMvc的後臺：（只寫關鍵程式碼）

@RequestMapping(value="/adduserSave",method=RequestMethod.POST)
    @ResponseBody

    //入參的filename 是表單中的檔案元素的 name屬性！！！！
    public ResultUtil adduserSave(@RequestParam("filename") MultipartFile file,
                                                     User user,

                                                   HttpServletRequest request) {
        Map<String, Object> result=new HashMap<String, Object>();
        String path = request.getSession().getServletContext().getRealPath("statics/images");
        String fileName = file.getOriginalFilename();
        File fil = new File(path, fileName);
        if(!fil.exists()){
            fil.mkdirs();
        }
        try {
            file.transferTo(fil);
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
        }
        String zpath=path+"\\"+fileName;
        user.setFile("statics/images/"+fileName);
        user.setJurisdiction("yes");
        boolean flag=userService.addUser(user);
        if(flag) {
          // 對應的結果處理
        }
    }

3

前端傳 FormData 物件，文字資料轉成JSON ,以鍵值對方式傳入資料，

後臺 springMvc處理通過jsonson 對映成實體類

前端程式碼：（只寫關鍵程式碼）

/* 提交表單資料封裝 */
    $('#submit').click(function() {
                /* 獲取表單資訊封裝 */
                var shop = {};
                if (isEdit) {
                    shop.shopId = shopId;
                }
                shop.shopName = $('#shop-name').val();
                shop.shopDesc = $('#shop-desc').val();
                shop.shopCategory = {
                    shopCategoryId: $("#shop-category").val()
                    
                }

//獲得圖片檔案
                var shopImg = $('#shop-img')[0].files[0];
                var formData = new FormData();

//圖片檔案以鍵值對的方式存入
                formData.append('shopImg', shopImg);

//JSON.stringify(shop)將資料封裝成 json
                formData.append('shopStr', JSON.stringify(shop));
                formData.append('verifyCodeActual', verifyCodeActual);
                $.ajax({
                    url : (isEdit ? editShopUrl:registerShopUrl),
                    type : 'POST',
                    data : formData,
                    contentType : false,
                    processData : false,
                    cache : false,
                    success : function(data) {
                      //相應處理
                    }

                })
            });

後臺程式碼：

引數入參是：private Map<String,Object> registerShop(HttpServletRequest request）

接收資料：

//接收並且轉化接收的資訊成實體類使用jackson
        String shopStr = HttpServletRequestUtil.getString(request, "shopStr");
        Shop shop =null;
        ObjectMapper mapper = new ObjectMapper();

shop = mapper.readValue(shopStr, Shop.class);

圖片處理：

//店鋪圖片
        CommonsMultipartFile shopImg = null;
        //解析從request中得到上下文
        CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(
                request.getSession().getServletContext());

//得到的上下文來判斷是否有檔案流
        if(commonsMultipartResolver.isMultipart(request)){
            MultipartHttpServletRequest multipartHttpServletRequest =  (MultipartHttpServletRequest)request;
            shopImg = (CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");
        }else{
            modelMap.put("success", false);
            modelMap.put("errMsg", "上傳圖片不能為空");
        }