js上傳本地文件
❶ js如何上傳文件
js採用File API 來上傳文件的。
File API 由一組 javaScript 對象以及事件構成。賦予開發人員操作在 <input type=」file」 … /> 文件選擇控制項中選定文件的能力。圖 1 展示了 File API 所有的 JavaScript 的組合關系。
File API 簡單示例
<body>
<h1>File API Demo</h1>
<p>
<!-- 用於文件上傳的表單元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"
action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead">
</span> / <span id="bytesTotal"></span>
</div>
</p>
</body>
運行效果：
❷ java 使用 AjaxUpload.js 實現上傳文檔的時候需要注意哪些
ajax是無法提交文件的，所以在上傳圖片並預覽的時候，我們經常使用Ifame的方法實現看似非同步的效果。但是這樣總不是很方便的，AjaxFilleUpload.js對上面的方法進行了一個包裝，使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁面結構，實現非同步的文件提交。
html:
復制代碼 代碼如下:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
復制代碼 代碼如下:
$.ajaxFileUpload({
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要鏈接到伺服器地址
secureuri:false,
fileElementId:'file_upload', //文件選擇框的id屬性
dataType: 'text', //伺服器返回的格式，可以是json、xml
success: function (data, status) //相當於java中try語句塊的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相當於java中catch語句塊的用法
$('#restoreDialog').html("上傳失敗，請重試");
}
});
這個方法還會出現一個問題，就是input只能使用一次的問題，input第二次的onchange將不會被執行，這應該是與瀏覽器的有關，解決辦法就是替換這個input
像這樣：
復制代碼 代碼如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
❸ 請高手給一個JS多文件上傳的例子（必須兼容IE）解決追加50分。請看補充。
一、Servlet實現文件上傳，需要添加第三方提供的jar包
下載地址：
1) commons-fileupload-1.2.2-bin.zip: 點擊打開鏈接
2) commons-io-2.3-bin.zip: 點擊打開鏈接
接著把這兩個jar包放到 lib文件夾下：
二：文件上傳的表單提交方式必須是POST方式，
編碼類型：enctype="multipart/form-data"，默認是 application/x-www-form-urlencoded
比如：
<form action="FileUpLoad"enctype="multipart/form-data"method="post">
三、舉例：
1.fileupload.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'fileuploadjsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
<!-- enctype 默認是 application/x-www-form-urlencoded -->
<form action="FileUpLoad" enctype="multipart/form-data" method="post" >
用戶名：<input type="text" name="usename"> <br/>
上傳文件：<input type="file" name="file1"><br/>
上傳文件： <input type="file" name="file2"><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
2.實際處理文件上傳的 FileUpLoad.java
package comservletfileupload;
import javaioFile;
import javaio*;
import javaioIOException;
import javaioPrintWriter;
import javautilList;
import javaxservletServletException;
import javaxservlethttpHttpServlet;
import ;
import ;
import ;
import ;
import ;
import ;
/**
*
* @author Administrator
* 文件上傳
* 具體步驟：
* 1）獲得磁碟文件條目工廠 DiskFileItemFactory 要導包
* 2） 利用 request 獲取 真實路徑 ，供臨時文件存儲，和 最終文件存儲 ，這兩個存儲位置可不同，也可相同
* 3）對 DiskFileItemFactory 對象設置一些 屬性
* 4）高水平的API文件上傳處理 ServletFileUpload upload = new ServletFileUpload(factory);
* 目的是調用 parseRequest（request）方法 獲得 FileItem 集合list ，
*
* 5）在 FileItem 對象中 獲取信息， 遍歷， 判斷 表單提交過來的信息 是否是 普通文本信息 另做處理
* 6）
* 第一種 用第三方 提供的 itemwrite( new File(path,filename) ); 直接寫到磁碟上
* 第二種 手動處理
*
*/
public class FileUpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
requestsetCharacterEncoding("utf-8"); //設置編碼
//獲得磁碟文件條目工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
//獲取文件需要上傳到的路徑
String path = requestgetRealPath("/upload");
//如果沒以下兩行設置的話，上傳大的 文件 會佔用 很多內存，
//設置暫時存放的 存儲室 , 這個存儲室，可以和 最終存儲文件 的目錄不同
/**
* 原理 它是先存到 暫時存儲室，然後在真正寫到 對應目錄的硬碟上，
* 按理來說 當上傳一個文件時，其實是上傳了兩份，第一個是以 tem 格式的
* 然後再將其真正寫到 對應目錄的硬碟上
*/
factorysetRepository(new File(path));
//設置 緩存的大小，當上傳文件的容量超過該緩存時，直接放到 暫時存儲室
factorysetSizeThreshold(1024*1024) ;
//高水平的API文件上傳處理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上傳多個文件
List<FileItem> list = (List<FileItem>)uploadparseRequest(request);
for(FileItem item : list)
{
//獲取表單的屬性名字
String name = itemgetFieldName();
//如果獲取的 表單信息是普通的 文本 信息
if(itemisFormField())
{
//獲取用戶具體輸入的字元串 ，名字起得挺好，因為表單提交過來的是 字元串類型的
String value = itemgetString() ;
requestsetAttribute(name, value);
}
//對傳入的非 簡單的字元串進行處理 ，比如說二進制的 圖片，電影這些
else
{
/**
* 以下三步，主要獲取 上傳文件的名字
*/
//獲取路徑名
String value = itemgetName() ;
//索引到最後一個反斜杠
int start = valuelastIndexOf("\\");
//截取 上傳文件的 字元串名字，加1是 去掉反斜杠，
String filename = valuesubstring(start+1);
requestsetAttribute(name, filename);
//真正寫到磁碟上
//它拋出的異常 用exception 捕捉
//itemwrite( new File(path,filename) );//第三方提供的
//手動寫的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = itemgetInputStream() ;
int length = 0 ;
byte [] buf = new byte[1024] ;
Systemoutprintln("獲取上傳文件的總共的容量："+itemgetSize());
// inread(buf) 每次讀到的數據存放在 buf 數組中
while( (length = inread(buf) ) != -1)
{
//在 buf 數組中 取出數據 寫到 （輸出流）磁碟上
outwrite(buf, 0, length);
}
inclose();
outclose();
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
eprintStackTrace();
}
catch (Exception e) {
// TODO Auto-generated catch block
//eprintStackTrace();
}
requestgetRequestDispatcher("filedemojsp")forward(request, response);
}
}
System.out.println("獲取上傳文件的總共的容量："+item.getSize());
3.filedemo.jsp
<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>
<%
String path = requestgetContextPath();
String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'filedemojsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="stylescss">
-->
</head>
<body>
用戶名：${requestScopeusename } <br/>
文件：${requestScopefile1 }<br/>
${requestScopefile2 }<br/>
<!-- 把上傳的圖片顯示出來 -->
<img alt="go" src="upload/<%=(String)requestgetAttribute("file1")%> " />
</body>
</html>
4結果頁面：
以上就是本文的全部
❹ 如何在角JS開始上傳文件
調用方法 HTML代碼：
<script type="text/javascript" src="CFUpdate.min.js" charset="utf-8"></script>
<div id="cfupdate" ></div>
主要配置參數的文件（Config.js）代碼
function challs_flash_update(){ //初始化函數
var a={};
//定義變數為Object 類型
a.title = "上傳文件"; //設置組件頭部名稱
a.FormName = "Filedata";
//設置Form表單的文本域的Name屬性
a.url = "update.php";
//設置伺服器接收代碼文件
a.parameter = "";
//設置提交參數，以GET形式提交,例："key=value&key=value&..."
a.typefile = "*.gif;*.png;*.jpg;*.jpeg;*.avi;";
//設置可以上傳文件 數組類型
//"*.gif;*.png;*.jpg"為文件擴展名列表，其中列出用戶選擇要上載的文件時可以看到的 Windows 文件格式，以分號相隔
a.UpSize = 0;
//可限制傳輸文件總容量，0或負數為不限制，單位MB
a.fileNum = 0;
//可限制待傳文件的數量，0或負數為不限制
a.size = 2048;
//上傳單個文件限制大小，單位MB，可以填寫小數類型
a.FormID = ['select','select2'];
//設置每次上傳時將注冊了ID的表單數據以POST形式發送到伺服器
//需要設置的FORM表單中checkbox,text,textarea,radio,select項目的ID值,radio組只需要一個設置ID即可
//參數為數組類型，注意使用此參數必須有 challs_flash_FormData() 函數支持
a.autoClose = 1;
//上傳完成條目，將自動刪除已完成的條目，值為延遲時間，以秒為單位，當值為 -1 時不會自動關閉，注意：當參數CompleteClose為false時無效
a.CompleteClose = true;
//設置為true時，上傳完成的條目，將也可以取消刪除條目，這樣參數 UpSize 將失效, 默認為false
a.repeatFile = true;
//設置為true時，可以過濾用戶已經選擇的重復文件，否則可以讓用戶多次選擇上傳同一個文件，默認為false
a.MD5File = 1;
//設置MD5文件簽名模式，參數如下 ,注意：對大文件計算時會很慢,在無特殊需要時，請設置為0
//0為關閉MD5計算簽名
//1為直接計算MD5簽名後上傳
//2為計算簽名，將簽名提交伺服器驗證，在根據伺服器反饋來執行上傳或不上傳
//3為先提交文件基本信息，根據伺服器反饋，執行MD5簽名計算或直接上傳，如果是要進行MD5計算，計算後，提交計算結果，在根據伺服器反饋，來執行是否上傳或不上傳
a.loadFileOrder=true;
//選擇的文件載入文件列表順序，TRUE = 正序載入，FALSE = 倒序載入
a.mixFileNum=0;
//至少選擇的文件數量，設置這個將限制文件列表最少正常數量（包括等待上傳和已經上傳）為設置的數量，才能點擊上傳，0為不限制
a.ListShowType = 1;
//文件列表顯示類型：
//1 = 傳統列表顯示，
//2 = 縮略圖列表顯示（適用於圖片專用上傳）
//5 = 極簡模式
//6 = 手機模式（適用於手機平板）
//
//3,4（保留暫無效果）
a.TitleSwitch = true;
//是否顯示組件頭部
a.ForceFileNum = 0;
//強制條目數量，已上傳和待上傳條目相加等於為設置的值（不包括上傳失敗的條目），否則不讓上傳, 0為不限制，設置限制後mixFileNum,autoClose和fileNum屬性將無效！
a.autoUpload = false;
//設置為true時，用戶選擇文件後，直接開始上傳，無需點擊上傳，默認為false;
a.adjustOrder = true;
//設置為true時，用戶可以拖動列表，重新排列位置
a.deleteAllShow = true
//設置是否顯示，全部清除按鈕
a.countData = true;
//是否向伺服器端提交組件文件列表統計信息，POST方式提交數據
//access2008_box_info_max 列表總數量
//access2008_box_info_upload 剩餘數量 （包括當前上傳條目）
//access2008_box_info_over 已經上傳完成數量 （不包括當前上傳條目)
a.isShowUploadButton = true;
//是否顯示上傳按鈕，默認為true
a.isRotation = true;
//是否可旋轉圖片
//此項只有在縮略圖模式下才有用
//開啟此項會POST一個圖片角度到伺服器端，由伺服器端旋轉圖片
//access2008_image_rotation 角度 0 到 -360
a.isErrorStop = true;
//遇見錯誤時，是否停止上傳，如果為false時，忽略錯誤進入下一個上傳
return a ;
//返回Object
}
function challs_flash_style(){ //組件顏色樣式設置函數
var a = {};
/* 整體背景顏色樣式 */
a.backgroundColor=['#f6f6f6','#f3f8fd','#dbe5f1']; //顏色設置，3個顏色之間過度
a.backgroundLineColor='#5576b8'; //組件外邊框線顏色
a.backgroundFontColor='#066AD1'; //組件最下面的文字顏色
a.backgroundInsideColor='#FFFFFF'; //組件內框背景顏色
a.backgroundInsideLineColor=['#e5edf5','#34629e']; //組件內框線顏色，2個顏色之間過度
/* 頭部顏色樣式 */
a.Top_backgroundColor=['#e0eaf4','#bcd1ea']; //顏色設置，數組類型，2個顏色之間過度
a.Top_fontColor='#245891'; //頭部文字顏色
/* 按鈕顏色樣式 */
a.button_overColor=['#FBDAB5','#f3840d']; //滑鼠移上去時的背景顏色，2個顏色之間過度
a.button_overLineColor='#e77702'; //滑鼠移上去時的邊框顏色
a.button_overFontColor='#ffffff'; //滑鼠移上去時的文字顏色
a.button_outColor=['#ffffff','#dde8fe']; //滑鼠離開時的背景顏色，2個顏色之間過度
a.button_outLineColor='#91bdef'; //滑鼠離開時的邊框顏色
a.button_outFontColor='#245891'; //滑鼠離開時的文字顏色
/* 滾動條樣式 */
a.List_scrollBarColor=0x000000; //滾動條顏色
a.List_scrollBarGlowColor=0x34629e; //滾動條陰影顏色
/* 文件列表樣式 */
a.List_backgroundColor='#EAF0F8'; //列表背景色
a.List_fontColor='#333333'; //列表文字顏色
a.List_errFontColor='#ff0000'; //列表錯誤信息文字顏色
a.List_LineColor='#B3CDF1'; //列表分割線顏色
a.List_cancelOverFontColor='#ff0000'; //列表取消文字移上去時顏色
a.List_cancelOutFontColor='#D76500'; //列表取消文字離開時顏色
a.List_progressBarLineColor='#B3CDF1'; //進度條邊框線顏色
a.List_progressBarBackgroundColor='#D8E6F7'; //進度條背景顏色
a.List_progressBarColor=['#FFCC00','#FFFF00']; //進度條進度顏色，2個顏色之間過度
/* 錯誤提示框樣式 */
a.Err_backgroundColor='#C0D3EB'; //提示框背景色
a.Err_fontColor='#245891'; //提示框文字顏色
a.Err_shadowColor='#000000'; //提示框陰影顏色
/* 手機模式專用樣式 （ListShowType = 6）*/
a.phone_backgroundColor = "#232323"; //手機模式背景色
a.phone_backgroundFontColor = "#f6f6f6"; //手機模式字體顏色
a.phone_top_font = 20; //手機模式頭部文字大小
a.phone_button_font = 18; //手機模式按鈕文字大小
a.phone_button_lineColor = "#2e2e2e"; //手機模式按鈕邊線色1
a.phone_button_default_color = "#232323"; //手機模式按鈕默認背景色
a.phone_button_default_fontColor = "#f6f6f6"; //手機模式按鈕默認字色
a.phone_button_click_color = "#265259"; //手機模式按鈕點擊時背景色
a.phone_button_click_fontColor = "#f6f6f6"; //手機模式按鈕點擊時字色
a.phone_backgroundInsideColor = "#2e2e2e"; //手機模式內框背景顏色
a.phone_List_backgroundColor = "#232323"; //手機模式列表背景色
a.phone_List_progressBarBackgroundColor = "#166549"; //手機模式列表進度條顏色
a.phone_List_name_font = 24; //手機模式列表文件名字體大小
a.phone_List_name_color = "#fff"; //手機模式列表文件名字體顏色
a.phone_List_type_font = 18; //手機模式列表狀態字體大小
a.phone_List_type_color = "#eee"; //手機模式列表狀態字體顏色
a.phone_List_Button_del_backgroundColor = "#e76e66"; //手機模式列表刪除按鈕背景色
a.phone_List_Button_del_off_backgroundColor = "#666"; //手機模式列表刪除按鈕禁用下的背景色
a.phone_List_Button_del_font = 20; //手機模式列表刪除按鈕文本大小
a.phone_List_Button_del_color = "#fff"; //手機模式列表刪除按鈕文本顏色
return a;
}
function challs_flash_language(){ //組件文字設置函數
var a = {
// $[1]$ $[2]$ $[3]$是替換符號
// \n 是換行符號
//按鈕文字
ButtonTxt_1:'停 止',
ButtonTxt_2:'選擇文件',
ButtonTxt_3:'上 傳',
ButtonTxt_4:'清空',
ButtonTxt_5:'刪 除',
//全局文字設置
Font:'宋體',
FontSize:12,
//提示文字
Alert_1:'初始化錯誤：\n\n沒有找到 JAVASCRITP 函數 \n函數名為 challs_flash_update()',
Alert_2:'初始化錯誤：\n\n函數 challs_flash_update() 返回類型必須是 "Object" 類型',
Alert_3:'初始化錯誤：\n\n沒有設置上傳路徑地址',
Alert_4:'添加上傳文件失敗，\n\n不可以在添加更多的上傳文件!',
Alert_5:'添加上傳文件失敗，\n\n等待上傳文件列表只能有$[1]$個，\n請先上傳部分文件!',
Alert_6:'提示信息：\n\n請再選擇$[1]$個上傳文件！',
Alert_7:'提示信息：\n\n請至少再選擇$[1]$個上傳文件！',
Alert_8:'請選擇上傳文件！',
Alert_9:'上傳錯誤：\n\n$[1]$',
//界面文字
Txt_5:'等待上傳',
Txt_6:'等待上傳：$[1]$個 已上傳：$[2]$個',
Txt_7:'位元組',
Txt_8:'總量限制（$[1]$MB）,上傳失敗',
Txt_9:'文件超過$[1]$MB,上傳失敗',
Txt_10:'秒',
Txt_11:'保存數據中...',
Txt_12:'上傳完畢',
Txt_13:'文件載入錯誤',
Txt_14:'掃描文件...',
Txt_15:'驗證文件...',
Txt_16:'取消',
Txt_17:'無圖',
Txt_18:'載入中',
Txt_20:'關閉',
Txt_21:'確定',
Txt_22:'上傳文件',
//錯誤提示
Err_1:'上傳地址URL無效',
Err_2:'伺服器報錯：$[1]$',
Err_3:'上傳失敗,$[1]$',
Err_4:'伺服器提交效驗錯誤',
Err_5:'效驗數據無效錯誤'
};
//英文
// var a = {
// ButtonTxt_1:'Stop',
// ButtonTxt_2:'Add file',
// ButtonTxt_3:'Upload',
// ButtonTxt_4:'Empty',
// Font:'Arial',
// FontSize:12,
// Alert_1:'Initialization error：\n\nJAVASCRITP function not found \nthe name of the function is challs_flash_update()',
// Alert_2:'Initialization error：\n\nfunction challs_flash_update() return type must be "Object"',
❺ js文件上傳中遇到的知識點
在前端開發中，我們經常遇到上傳文件的需求，以前都是用到時再找資料，但總是感覺對這塊不熟，最近翻資料學習了一下，記錄一下。
本文中涉及的知識點有：FileList對象，Blob對象，File對象，URL對象、FormData對象等。
本文參考 網道 ，總結而來。另外，強烈推薦網道，可以去 網道的官方 看看，是阮一峰大神發起的項目，提供互聯網開發文檔，文檔非常全面易懂。
FileList對象，是一個像數組的對象，擁有length屬性和item()方法，同時，它的每一項都是File對象。
input 標簽，將type設為file，之後得到的files屬性就是一個FileList對象。
blob 對象表示1個二進制文件的數據內容。blob對象和arraybuffer區別是，blob對象用於操作二進制文件，arraybuffer用於操作內存。
blob 對象擁有2個屬性和1個方法，分別是size(單位是位元組)、type屬性和slice()方法。
File 對象是一種特殊的Blob 對象。它在繼承了size、type屬性外，還同時有name、lastModified、lastModifiedDate等幾個屬性。
FileList 對象中的每一項都是File 對象。
拿到File 對象之後就要進行操作，下面是操作。
URL.createObjectURL(file) 允許為File 對象創建一個臨時鏈接，
FileReader 對象的屬性和方法比較多，屬性中比較重要的是result，方法中比較重要的是
FileReader 對象的所有屬性和方法可以參考 這里 ,這里就不再列出來了。
在早期的互聯網時候，提交數據都是用表單。表單提交數據有些缺陷，例如無法校驗表單數據，會刷新整個頁面等。隨著Ajax的興起，頁面表單提交數據慢慢退出歷史舞台，但有時上傳文件時我們偶爾會用到表單提交數據。
在調用構造函數new FormData(form)構造formdata對象時需要傳入form節點，如果不傳入，則默認構建空表單。如果傳入，則按照key=value的時候構建表單。
可以看看效果圖
FormData 對象主要的方法有：
cavas壓縮圖片其實很簡單，無非就是幾個步驟：
1、選擇圖片，判斷圖片是否大於2M（用File對象的size進行判斷，size的單位是位元組）；
2、用FileReader對象讀取文件成base64,
3、然後創建Image對象，賦值src屬性，在Image對象載入完成的回調里創建cavas並繪制圖片(根據圖片是否大於2M動態調整畫布大小)；
4、將cavas轉成blob，拼在formdata中用ajax上傳。
這篇文章到這里也就結束了，這篇文章包含了一些瀏覽器中提供的對象，可以看到都是很簡單的內容。
❻ 前台js 後台java 怎麼上傳文件
你上傳文件需要遠程調用？雙方都是java的 可以使用rmi來實現 如果不是的話 還是套接字傳好了
❼ js本地文件怎麼上傳到伺服器ftp
下載一個ftp連接工具，安裝以後點連接，輸入伺服器的ftp連接信息，如ip，用戶名密碼等連接成功後，將文件傳輸到對應的文件目錄下。
❽ 最近在研究nodejs如何實現文件上傳功能
前端formdata或者Ajax上傳文件
Node端：用multiparty接收文件，再用fs.rename將文件存儲到你需要的位置。
var MULTIPARTY = require('multiparty');
var FS = require('fs');
var saveTowerFile = function (req, res, next) {
var form = new MULTIPARTY.Form({uploadDir: "../appData/excel/"});
form.parse(req, function (err, fields, files) {
if (err) {
console.log("上傳失敗！" + err);
var errcode = {result: "失敗"};
res.send(errcode);
return;
} else {
var inputFile = files.file[0];
var uploadedPath = inputFile.path;
var dstPath = '../appData/excel/' + UUID.v1();
FS.rename(uploadedPath, dstPath, function(err) {
if (err) {
var errcode = {result: "失敗"};
res.send(errcode);
return;
} else {
debug('rename ok');
res.send(「OK」);
}
})
}
});
};
❾ 我想實現 html +js 上傳圖片 並保存到本地tmp目錄下，現有代碼如下，求指導。必採納
你js代碼把文件以base64編碼形式展示了出來，是為了讓用戶上傳文件之前能夠預覽對吧。
文件的IO操作需要用後端來實現，如果你只是做web前端開發的話，就沒有必要研究這個東西，如果你是後端開發者的話可以嘗試一下，相關的資料很多，我寫個示例吧，後端用php為例：
html實現：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>ss</title>
</head>
<body>
<formaction="file.php"method="post"enctype="multipart/form-data">
<inputtype="file"name="upfile">
<inputtype="submit"value="提交">
</form>
</body>
</html>
php實現（file.php）：
<?php
@header('Content-Type:text/html;charset=utf-8');
if(!isset($_FILES['upfile'])){
exit('請選擇您要上傳的文件！');
}
if(!file_exists($_FILES['upfile']['tmp_name'])){
exit('您要上傳的文件不存在！');
}
$file_dir=dirname(__FILE__).'/tmp';
if(!is_file($file_dir)){
@mkdir($file_dir,0777,true);
}
$file_ext='.jpg';
if(preg_match('/(.w+)$/',$_FILES['upfile']['name'],$ext_tmp)){
$file_ext=$ext_tmp[1];
}
$file_save_path=$file_dir.'/'.uniqid().mt_rand(101,999).$file_ext;
@rename($_FILES['upfile']['tmp_name'],$file_save_path);
if(!file_exists($file_save_path)){
exit('文件上傳失敗！');
}
exit('文件上傳成功！');
❿ 如何使用 NodeJS 將文件或圖像上傳到伺服器
下面先介紹上傳文件到伺服器（多文件上傳）：
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
import java.util.regex.*;
import org.apache.commons.fileupload.*;
public class upload extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GB2312";
//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType(CONTENT_TYPE);
PrintWriter out=response.getWriter();
try {
DiskFileUpload fu = new DiskFileUpload();
// 設置允許用戶上傳文件大小,單位:位元組，這里設為2m
fu.setSizeMax(2*1024*1024);
// 設置最多隻允許在內存中存儲的數據,單位:位元組
fu.setSizeThreshold(4096);
// 設置一旦文件大小超過getSizeThreshold()的值時數據存放在硬碟的目錄
fu.setRepositoryPath("c://windows//temp");
//開始讀取上傳信息
List fileItems = fu.parseRequest(request);
// 依次處理每個上傳的文件
Iterator iter = fileItems.iterator();
//正則匹配，過濾路徑取文件名
String regExp=".+////(.+)$";
//過濾掉的文件類型
String[] errorType={".exe",".com",".cgi",".asp"};
Pattern p = Pattern.compile(regExp);
while (iter.hasNext()) {
FileItem item = (FileItem)iter.next();
//忽略其他不是文件域的所有表單信息
if (!item.isFormField()) {
String name = item.getName();
long size = item.getSize();
if((name==null||name.equals("")) && size==0)
continue;
Matcher m = p.matcher(name);
boolean result = m.find();
if (result){
for (int temp=0;temp<ERRORTYPE.LENGTH;TEMP++){
if (m.group(1).endsWith(errorType[temp])){
throw new IOException(name+": wrong type");
}
}
try{
//保存上傳的文件到指定的目錄
//在下文中上傳文件至資料庫時，將對這里改寫
item.write(new File("d://" + m.group(1)));
out.print(name+" "+size+"");
}
catch(Exception e){
out.println(e);
}
}
else
{
throw new IOException("fail to upload");
}
}
}
}
catch (IOException e){
out.println(e);
}
catch (FileUploadException e){
out.println(e);
}
}
}
現在介紹上傳文件到伺服器，下面只寫出相關代碼：
以sql2000為例，表結構如下：
欄位名：name filecode
類型： varchar image
資料庫插入代碼為：PreparedStatement pstmt=conn.prepareStatement("insert into test values(?,?)");
代碼如下：
。。。。。。
try{
這段代碼如果不去掉，將一同寫入到伺服器中
//item.write(new File("d://" + m.group(1)));
int byteread=0;
//讀取輸入流，也就是上傳的文件內容
InputStream inStream=item.getInputStream();
pstmt.setString(1,m.group(1));
pstmt.setBinaryStream(2,inStream,(int)size);
pstmt.executeUpdate();
inStream.close();
out.println(name+" "+size+" ");
}
。。。。。。
這樣就實現了上傳文件至資料庫