java Web開發實現手機拍照上傳到服務器

時間  2019-11-10
標籤 java web 開發 實現 手機 拍照 上傳 服務器 欄目 Java 简体版
原文   原文鏈接

第一步：javascript

搭環境,基本jdk 1.6+apache tomcat6.0+myeclipse2014
1.咱們要清楚本身的jdk版本。由於咱們Apache Tomcat配置的成功的前提是版本相對應。
安裝jdk1.6是因爲myeclipse中新建webproject時，有可能只有1.6和1.7兩個選項，不過不一樣的myeclipse版本應該不一樣，以下圖：

clipboard.png

具體安裝的jdk的過程和環境變量的設置就百度一下，教程不少，安裝好了以後，查看一下版本，以下圖：html

clipboard.png

2.安裝apache tomcat6.0，推薦安裝壓縮版，下載以後直接解壓縮，而後設置一下環境變量就能夠用了。
解壓縮都隨便一個盤都行，下圖是個人路徑：java

clipboard.png

5.配置相關環境變量，因爲本人以前已經配置了Java開發時環境，即JDK。所以JAVA_HOME就沒必要再配置了
1）環境變量1：CATALINA_HOME,環境變量值：F:\tomcat-6.0.35
（環境變量值即爲相應ZIP文件解壓目錄）
2）環境變量2：CATALINA_BASE，環境變量值：F:\tomcat-6.0.35
（與CATALINA相同）
3）環境變量2：TOMCAT_HOME，環境變量值：F:\tomcat-6.0.35
（與CATALINA相同）
4）環境變量3：CALSSPATH，修改環境變量值，在其後加上：%CATALINA_HOME%libservlet-api.jar;
5）環境變量4：PATH，修改環境變量值，在其後加上：%CATALINA_HOME%libservlet-api.jar;
圖片展現：web

clipboard.png

clipboard.png

環境變量設置好了以後，須要修改一些tomcat的配置信息,路徑：F:\tomcat-6.0.35\conf\server.xml如何跟下圖同樣的，能夠不用修改：apache

clipboard.png

上面的東西所有配置完成以後，能夠啓動一下tomcat，看是否配置成功，雙擊 F:\tomcat-6.0.35\bin目錄下的startup.bat：api

clipboard.png

這樣就顯示配置成功了，而後咱們能夠訪問一下tomcat自帶的例子，打開瀏覽器輸入localhost:80/index.html，80是端口號，可自行修改，如何沒有修改過，則是8080，以下圖所示：瀏覽器

clipboard.png

3.安裝myeclipse 2014，安裝過程很簡單，只分享一下安裝包和破解包，破解包中自帶破解教程，百度雲連接https://pan.baidu.com/s/1c13JSdE 密碼：3ji7tomcat

安裝與破解完成以後，首先將myeclipse的編碼格式改成UTF-8國際編碼。
window->perferences 如圖：app

clipboard.png

因爲myeclipse不會自動導入你配置好的jdk,須要手動配置，由於沒有什麼特殊的，直接百度配置教程：http://jingyan.baidu.com/arti...dom

myeclipse中配置tomcat和如何啓動的教程也比較多，也好找，連接：http://jingyan.baidu.com/arti...
這是我配置好了後

clipboard.png

點擊上圖中圓圈圈起來的圖標，啓動你本身導入的tomcat，而後矩形框是用來將你建立的web project映射到F:\tomcat-6.0.35\webapps目錄下

clipboard.png

新建一個web project

clipboard.png
...]

而後映射到webapps目錄下：

clipboard.png

clipboard.png

clipboard.png

而後開始寫代碼：
首先將index.jsp的編碼格式設置爲UTF-8

clipboard.png

而後導入jsp-api.jar，這個包在
clipboard.png

index.jsp中的主要代碼爲
form 中action的值爲與後面創建的servlet/JSP mapping URL一致，能夠先創建了servlet再來修改這個值。
${result}這個顯示上傳狀態,與後面在SmartUpload.java中有定義。
showPreView(this)方法是用來預覽圖片的。

<form action="SmartUpload.do" enctype="multipart/form-data" method="post">
        <input id="img" type="file" name="file1" accept="image/*" capture="camera" onchange="showPreview(this)" style="height: 130px; width: 460px; "><br/>
         
         <input type="submit" value="提交" style="height: 48px; width: 90px; "><br/>
        <div id="preview"></div><br/>
        ${result}    
    </form>
  </body>
  <script    type="text/javascript">
        var fileList=document.getElementById("preview");
        function showPreview(obj){
            var files = obj.files,
                img = new Image();
                if(window.URL){
                //File API
                //alert(files[0].name + "," + files[0].size/(1024*1024) + "MB");
                img.src = window.URL.createObjectURL(files[0]); //建立一個object URL，並非你的本地路徑
                img.width = 200;
                img.onload = function(e) {
                    window.URL.revokeObjectURL(this.src); //圖片加載後，釋放object URL
                }
                fileList.appendChild(img);
           
            }
            else if(window.FileReader){
                //opera不支持createObjectURL/revokeObjectURL方法。咱們用FileReader對象來處理
                
           
                var reader = new FileReader();
                reader.readAsDataURL(files[0]);
                reader.onload = function(e){
                   // alert(files[0].name + "," +e.total/(1024*1024) + "MB");
                    img.src = this.result;
                    img.width = 200;
                    fileList.appendChild(img);
               
                }
            }
            else{
                //ie
                obj.select();
                obj.blur();
                var nfile = document.selection.createRange().text;
                document.selection.empty();
                img.src = nfile;
                img.width = 200;
                img.onload=function(){
                 //   alert(nfile+","+img.fileSize/(1024*1024) + "MB");
                }
                fileList.appendChild(img);
            }
            }
    </script>

新建servlet

clipboard.png

clipboard.png

clipboard.png

創建成功了以後，能夠看到web.xml中的一些自動配置好的信息：

clipboard.png

SmartUpload.java

package com.upload;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import java.io.RandomAccessFile;
import java.text.SimpleDateFormat;
import java.util.Date;


import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



public class SmartUpload extends HttpServlet {

     // 定義容許上傳的文件擴展名
    private String Ext_Name = "gif,jpg,jpeg,png,bmp,swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2";
    //顯示上傳文件的結果
    private String result=null;
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req,resp);
        
    }

    
    public void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //獲取上傳文件流
        InputStream fileSource=req.getInputStream();
        //設置臨時文件名
        String tempFileName="F:/tempFile";
        File tempFile=new File(tempFileName);
        //文件輸出流，將上傳的文件寫入按字節流臨時文件
        FileOutputStream outputStream=new FileOutputStream(tempFile);
        byte b[]=new byte[1024];
        int n;
        while((n=fileSource.read(b))!=-1){
            outputStream.write(b,0,n);
        }
        outputStream.close();
        fileSource.close();
        //建立文件隨機流，讀取臨時文件
        RandomAccessFile randomFile=new RandomAccessFile(tempFile,"r");
        //第一行的垃圾數據不須要
        randomFile.readLine();
        //在第二行中獲取文件後綴名
        String str=randomFile.readLine();
        //獲取文件後綴名
        String fileExt=str.substring(str.indexOf(".")+1,str.lastIndexOf("\"")).toLowerCase();
         // 檢查擴展名
        // 若是須要限制上傳的文件類型，那麼能夠經過文件的擴展名來判斷上傳的文件類型是否合法
        System.out.println("上傳的文件的擴展名是：" + fileExt);
        if(!Ext_Name.contains(fileExt)){
            System.out.println("上傳文件擴展名是不容許的擴展名：" + fileExt);
           result = result + "上傳文件擴展名是不容許的擴展名：" + fileExt + "<br/>";
           randomFile.close();
           RequestDispatcher dispatcher=req.getRequestDispatcher("index.jsp");
               dispatcher.forward(req, resp);
           return;
        }
        //獲得保存文件的名字
        String filename=makeFileName(fileExt);
    
        
        //從新定位文件指針到文件頭
        randomFile.seek(0);
        long startPosition=0;
        int i=1;
        while((n=randomFile.readByte())!=-1&&i<=4){
            if(n=='\n'){
                startPosition=randomFile.getFilePointer();
                i++;
            }
        }
        //startPosition=startPosition-1;
    
        
        //獲取文件內容結束位置
        randomFile.seek(randomFile.length());
        long endPosition=randomFile.getFilePointer();
        
        int j=1;
        while(endPosition>=0&&j<=2){
            endPosition--;
            randomFile.seek(endPosition);
            if(randomFile.readByte()=='\n'){
                j++;
            }
        }
        endPosition=endPosition-1;
        String savePath="F:/images";
        File fileupload=new File(savePath);
        if(!fileupload.exists()){
            fileupload.mkdir();
        }
        //新建文件和文件名字
        File saveFile=new File(savePath,filename);
        RandomAccessFile randomAccessFile=new RandomAccessFile(saveFile,"rw");
        //從臨時文件的當中讀取文件內容
        randomFile.seek(startPosition);
        while(startPosition<endPosition){
            randomAccessFile.write(randomFile.readByte());
            startPosition=randomFile.getFilePointer();
        }
        //關閉輸入輸出流，刪除臨時文件
        randomAccessFile.close();
        randomFile.close();
        tempFile.delete();
        req.setAttribute("result","上傳成功");
        
        RequestDispatcher dispatcher=req.getRequestDispatcher("index.jsp");
        dispatcher.forward(req, resp);
        
        
    }
    private String makeFileName(String fileExt) {
        // 將文件名定義爲年月日秒便於區分
        Date nowDate=new Date();
        SimpleDateFormat matter1=new SimpleDateFormat("yyyyMdHms");
        String timePattern =matter1.format(nowDate);
        System.out.println(timePattern);
        return timePattern+ "."+fileExt;

    }
    
    

}

上傳圖片的頁面效果：

clipboard.png

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程