利用uploadservlet

程式碼

package com.oracle.web.product;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;

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

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.IOUtils;

 
public class UploadServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 建立磁碟檔案項工廠
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 建立檔案上傳核心物件
            ServletFileUpload upload = new
 
 ServletFileUpload(factory);
            // 解析request獲得檔案項物件集合
            List<FileItem> parseRequest = upload.parseRequest(request);
            for (FileItem item : parseRequest) {
                // 判斷是否是普通表單項
                boolean formField = item.isFormField();
                if (formField) {
                    
 
// 普通表單項獲得表單的資料 封裝到Product實體中
                    String fieldName = item.getFieldName();
                    // 解決普通項的亂碼
                    String fieldValue = item.getString("UTF-8");

                    System.out.println(fieldName+"..."+fieldValue);
                } else {
                    // 檔案上傳項 獲得檔名稱 獲得檔案的內容
                    String fileName = item.getName();
                    System.out.println(fileName);

                    fileName=new String(fileName.getBytes("GBK"),"UTF-8");
                    System.out.println(fileName);
                    String path = this.getServletContext().getRealPath("/upload");
                    File file = new File(path);
                    // 判斷上傳檔案的儲存目錄是否存在
                    if (!file.exists() && !file.isDirectory()) {
                        // 建立目錄
                        file.mkdirs();
                    }
                    //檔案備份到/本地專案路徑
                    String path2 = "C:\\Users\\Administrator\\Desktop\\Marke\\WebContent\\upload";
                    File file2 = new File(path2);
                    // 判斷上傳檔案的儲存目錄是否存在
                    if (!file2.exists() && !file2.isDirectory()) {
                        // 建立目錄
                        file2.mkdirs();
                    }
                    //上傳到伺服器
                    InputStream in = item.getInputStream();
                    OutputStream out = new FileOutputStream(path + "\\" + fileName);
                    IOUtils.copy(in, out);
                    //備份到本地專案路徑
                    InputStream in2 = item.getInputStream();
                    OutputStream out2 = new FileOutputStream(path2 + "\\" + fileName);
                    IOUtils.copy(in2, out2);
                    in.close();
                    out.close();
                    item.delete();
                    in2.close();
                    out2.close();
                    
                    response.getWriter().write("{\"path\":\"upload/"+fileName+"\"}");
                }
            }
        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

利用layui的上傳

1.現因檔案

<link rel="css/layui.css">

<script src=layui.all.js"></script>
    <script src=jquery-1.11.3.min.js"></script>

上傳檔案

　<label class="layui-form-label">商品圖片</label>
<button type="button" class="layui-btn" id="test1">
</button>
<input type="hidden" id="pimg" name="pimage" value="">
<img id="image" alt="" src="">

//js程式碼

layui.use('upload', function(){
		  var upload = layui.upload;
		   
		  //執行例項
		  var uploadInst = upload.render({
		    elem: '#test1' //繫結元素
		    ,url: '${pageContext.request.contextPath }/UploadServlet' //上傳介面
		    
		    ,done: function(res){
		      //上傳完畢回撥
		     alert(res.path);
		     $("#pimg").val(res.path);
		     $("#imge").prop("src",res.path);
		    
		    }
		    ,error: function(){
		      //請求異常回調
		    }
		  });
		});