ajax方式上傳文件


場景,需要上傳附近但不刷新當前頁面信息。

前段jsp代碼

 

 1 <!DOCTYPE html>
 2 <html><head>
 3   <title></title>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 6 </head>
 7 <script src="js/jquery-1.7.1.min.js"></script>
 8 
 9 <body>
10 <button id="Photograph">拍照</button>
11 <form  id="cardForm" enctype="multipart/form-data" method="post">
12       <input type="file" name="file1" id="file1" accept="image/*" capture="camera" style="display: none;">
13 </form>
14 <textarea id="text" STYLE="width: 400px;height: 200px"></textarea>
15 <script type="text/javascript">
16   $(function () {
17   $("#Photograph").click(function () {
18       $("#file1").trigger("click");
19 
20   });
21 
22   $("#file1").change(function () {
23       var url=new FormData($("#cardForm")[0]);
24       /**
25        *  使用ajax提交form表單的上傳文件,
26        *  首先要使用FormData的獲取表單的上次文件數據,
27        *  在ajax中設置contentType:false,processData:false,cache:false,這三個屬性必須為false具體原因就不清楚了
28        *  但可以簡單說下這3個屬性的作用:
29        *  cache    布爾值,表示瀏覽器是否緩存被請求頁面。默認是 true,因為是文件類型數據不需要緩存
30        *  contentType  發送數據到服務器時所使用的內容類型。默認是:"application/x-www-form-urlencoded"。false就是不指定類型
31        *  processData  布爾值,規定通過請求發送的數據是否轉換為查詢字符串。默認是 true。關鍵應該在這里,因為我們上傳的是文件類型數據,如果
32        *  不設置processData:false請求就好將文件類型數據去轉換為字符串會導致js報錯。
33        */
34       $.ajax({
35           url:"Servlet",
36           type:"post",
37           contentType:false,
38           processData:false,
39           cache:false,
40           data:url,
41           success:function (data) {
42               $("#text").text(data);
43               console.log(data);
44           }
45       });
46   });
47   });
48 
49 </script>
50 </body></html>

 

后端Servlet代碼:當然如果是SpringMVC等框架的話,前段不需要改動將后端按照SpringMvc的方式修改就可以了。

http://www.cnblogs.com/gynbk/p/6556270.html 上傳文件代碼地址

 

使用Commons-FileUpload組件實現文件上傳
 
1.    創建上傳對象
創建一個工廠對象
DiskFileItemFactory  factory=new DiskFileItemFactory ();
創建一個新的文件上傳對象
ServletFileUpload  upload=new  ServletFileUpload(factory);
2.    解析上傳請求
通過parseRequest()方法獲取全部表單項。
Public  List  parseRequest(HttpServletRequest  request) throws FileUploadException
通過isFormField()方法判斷表單項是文件域還是普通表單域。如果返回true說明是普通表單域。
Public  Boolean  isFormField()
通過FileItem類的getName()方法實現獲取文件上傳名稱。
getSize()方法獲得文件上傳的大小。
getContentType()方法獲得上傳文件的類型。
 
上傳文件實例

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String  ctname;
        //獲得文件上傳的真實地址
        String fileDir=request.getRealPath("upload/");
        String  mesg="文件上傳成功";
        String  address="";

        //判斷是否上傳文件
        if(ServletFileUpload.isMultipartContent(request)){
            //創建一個工廠對象
            DiskFileItemFactory  factory=new DiskFileItemFactory();
            //設置內存中允許存儲的字節
            factory.setSizeThreshold(20*1024);
            //設置存放臨時文件的路徑
            factory.setRepository(factory.getRepository());
            //創建一個上傳文件的對象
            ServletFileUpload  upload=new ServletFileUpload(factory);
            //設置上傳文件大小
            int size=4*1024*1024;
            //保存上傳文件的集合對象
            List list=null;

            try {
                //獲得上傳文件列表
                list=upload.parseRequest(request);
            } catch (FileUploadException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            //創建迭代器
            Iterator  iter=list.iterator();
            //循環迭代
            while(iter.hasNext()){
                //創建FileItem對象,獲得每一個上傳文件
                FileItem  flie=(FileItem)iter.next();
                //判斷是文件域或普通表單域
                if(!flie.isFormField()){
                    //獲得文件名稱
                    String name=flie.getName();
                    //判斷文件大小是否超過設定文件大小
                    if(flie.getSize()>size){
                        mesg="文件過大,無法上傳";

                    }

                    //獲取上傳文件大小
                    String ctsize=new  Long(flie.getSize()).toString();
                    //判斷文件是否存在
                    if((name==null || name.equals("")) && ctsize.equals("0")){

                        mesg="文件為空。";
                        continue;//文件為空跳出本次循環
                    }
                    //創建上傳文件的名稱
                    ctname=name.substring(name.lastIndexOf("\\")+1,name.length());
                    address=fileDir+"\\"+ctname;
                    //創建File對象,根據文件地址創建一個空文件
                    File  file=new File(address);

                    try {
                        //向創建的文件中寫入數據
                        flie.write(file);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }

                }

            }

        }

       
//返回文本內容的方式
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(mesg);

//RequestDispatcher 跳轉頁面方式
//request.setAttribute("msg", mesg);
dispatcher=request.getRequestDispatcher("Deal.jsp");

//執行轉發
//dispatcher.forward(request, response);
        doGet(request, response);
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM