檔案上傳從web到Java
- 前言
- 一、js前端代碼
- 二、后端Java代碼
- eclipse中的資料源配置：在server.xml中 < Host>標簽里面加上如下代碼：
- IDE配置資料源
- 總結
前言
博主最近太難了，又是畢業設計又是論文，還得天天加班，都快一個月沒有更新總結了，今天分享一個曾今用過的檔案上傳的實體，希望可以對一些小伙伴有所幫助，主要包括一個基于layui的前端檔案上傳的實體和后端Java操作的代碼，代碼和截圖都會放在下面，
提示：以下是本篇文章正文內容，下面案例可供參考
一、js前端代碼
<font color= >示例：layui是一個前端框架，本實體需要匯入layui，下載鏈接如下： layui下載鏈接:https://download.csdn.net/download/bug_producter/15491803
注意以下實體為多檔案上傳的實體，回傳引數以下均有截圖
<%--
Created by IntelliJ IDEA.
User: user-xumz
Date: 2021/3/23
Time: 18:13
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>上傳檔案</title>
<script src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../js/layui/layui.js"></script>
<link type="text/css" rel="styleSheet" href="../js/layui/css/layui.css"/>
<style type="text/css">
.layui-input-block {
margin-left: 130px;
/*min-height: 36px;*/
}
</style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">上傳檔案</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div style="width: 96%;position: absolute;overflow-y: auto;overflow-x: hidden;">
<div style="width: 75%; margin: 0 auto;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>選擇圖片上傳</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多檔案</button>
<button type="button" class="layui-btn" id="testListAction">開始上傳</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>檔案名</th>
<th>大小</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var picurl = "";
layui.use(['form', 'layer', 'laydate', 'upload', 'layedit', 'element'], function () {
var form = layui.form
, layer = layui.layer
, upload = layui.upload;
//多檔案串列示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '../fileUploadsImgs' //改成您自己的上傳介面
, accept: 'images' //允許上傳的檔案型別
/* , acceptMime: 'image/!*' //只篩選圖片
, exts: 'jpg|png|gif|jpeg' //允許上傳的檔案后綴*/
,accept: 'file'
,exts: 'txt|xls|xlsx|ppt|pptx|pdf|doc|docx'
, size: 1024*100 //最大允許上傳的檔案大小
, multiple: true //多檔案上傳
, auto: false //不自動上傳
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列
//讀取本地檔案
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td>等待上傳</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重傳</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">洗掉</button>'
, '</td>'
, '</tr>'].join(''));
//上傳失敗后，單個重傳
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//洗掉
tr.find('.demo-delete').on('click', function () {
delete files[index]; //洗掉對應的檔案
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免洗掉后出現同名檔案不可選
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
console.log(res);//回傳值
// console.log(index);//上傳檔案的索引
// console.log(upload);//重新上傳方法
console.log(res.url.saveURL);
if (res.code == 0) { //回傳code==0表示上傳成功
picurl = picurl + res.url.saveURL + "<&>";//保存上傳地址
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //洗掉檔案佇列已經上傳成功的檔案，執行后回傳，不再往下繼續執行
} else {
this.error(index, upload);//執行erro
}
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
}
});
});
</script>
</body>
</html>
如果沒有jquery-1.11.0.js的用別的版本也是可以的，
二、后端Java代碼
此后端代碼來源于師兄的分享，如卻確為網上某處原文，請聯系博主，以便博主備注出處
package cn.xumz.stusystem.utils;
import com.alibaba.fastjson.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.log4j.Logger;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.Date;
import java.util.List;
import java.util.Random;
@WebServlet("/fileUploadsImgs")
public class FileUpload extends HttpServlet {
@SuppressWarnings("unused")
private static final Logger Log = Logger.getLogger(FileUpload.class);
private static final long serialVersionUID = 1L;
public FileUpload() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@SuppressWarnings({"unchecked"})
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //設定編碼
String saveName = null;
String value = null; //獲取上傳檔案名
String path = "F:/upImages/";//本地地址
JSONObject jsonobj = new JSONObject();
// System.out.println("---------------");
int returnTag = -1;
try {
request.setCharacterEncoding("utf-8"); // 設定編碼
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
// 獲得磁盤檔案條目工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(path));
// 設定 快取的大小，當上傳檔案的容量超過該快取時，直接放到 暫時存盤室
factory.setSizeThreshold(200 * 1024 * 1024);
// 高水平的API檔案上傳處理
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> list = (List<FileItem>) upload.parseRequest(request);
for (FileItem item : list) {//獲取表單的屬性名字
String name = item.getFieldName();
/** 以下三步，主要獲取 上傳檔案的名字*/
//獲取上傳檔案名
value = item.getName();
//索引到最后一個反斜杠
int start = value.lastIndexOf("\\");
//截取 上傳檔案的 字串名字，加1是 去掉反斜杠，
String filename = value.substring(start + 1);
String suffix = filename.substring(filename.lastIndexOf(".")); //檔案后綴
// 保存后的檔案名
String timeString = new Date().getTime() + "";
saveName = "x" + timeString.substring(0, 10) + getRandom() + suffix;
request.setAttribute(name, filename);
//手動寫的
OutputStream out = new FileOutputStream(new File(path, saveName));
InputStream in = item.getInputStream();
int length = 0;
byte[] buf = new byte[1024];
//in.read(buf); //每次讀到的資料存放在 buf 陣列中
while ((length = in.read(buf)) != -1) {
//在 buf 陣列中 取出資料 寫到 （輸出流）磁盤上
out.write(buf, 0, length);
}
in.close();
out.close();
}
JSONObject object = new JSONObject();
object.put("saveURL", (path + saveName));// 保存后的檔案名
object.put("name", value); //原檔案名稱
jsonobj.put("code", "0");
jsonobj.put("url", object);
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
} catch (Exception e) {
Log.info("出錯啦");
e.printStackTrace();
jsonobj.put("code", "-1");
response.getWriter().write(jsonobj.toString());
response.getWriter().close();
}
}
//生成亂數
public String getRandom() {
String sjs = "";
String s = "123456789";
char[] c = s.toCharArray(); //將字串轉換為字符陣列
Random random = new Random(); //
for (int i = 0; i < 6; i++) {
sjs = c[random.nextInt(c.length)] + sjs;
}
return sjs;
}
}
Java代碼需要匯入以下3個jar:
點擊下載所需jar，https://download.csdn.net/download/bug_producter/16732446)
運行效果截圖如下：
上傳成功，會回傳code=0以及檔案保存的地址，注意：
這里的地址是你本機的地址，專案部署到服務器上后改為服務器上地址即可，如果要在專案里訪問你上傳的檔案，則需要在專案里配置資料源，具體在IDEA和eclipse中的配置地方是不一樣的，稍后再追加地址（資料源）配置
eclipse中的資料源配置：在server.xml中 < Host></ Host>標簽里面加上如下代碼：
<Context debug="0" docBase="F:/upImages/" path="/file" reloadable="true"/>
F:/upImages/ 是上傳的檔案的地址，/file 是在本專案里的檔案訪問地址，例如在F:/upImages/里面已經存在了一個173321.mp4檔案，那么在專案里，就可以通過/file/173321.mp4這個地址訪問到檔案，如果專案啟動了，你也可以在瀏覽器里輸入：專案地址+埠/file/173321.mp4，訪問到檔案，博主的實體如：http://localhost:8089//file/173321.mp4
IDE配置資料源
總結
以下兩篇圖片上傳的文章也許會對你有幫助：
1.JS前端圖片壓縮上傳-純js(https://blog.csdn.net/bug_producter/article/details/114038966)
2.JS前端圖片壓縮上傳(https://blog.csdn.net/bug_producter/article/details/113934145)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/277673.html
標籤：python