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>
運行效果：
❷ 如何通過js完成多個文件的上傳
HTML5 file組件的新屬性
accept : 如果在file組件中增加這個屬性就可以直接控制上傳的文件類型了，實在是很方便。
multiple：是否允許選擇多個文件
HTML5 頁面代碼修改後
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以參閱：IANA MIME 類型（標准 MIME 類型的完整列表），如果使用的是DW開發的話，軟體本身就有提示。
如果選擇了多個文件，可以用JS做循環列印，看看文件的名稱，類型和大小,看演示代碼
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 個文件的名字："+ file.name +
" , 文件類型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循環多文件的話，就可以嘗試多文件上傳了。
1、首先創建 XMLHttpRequest 對象
//這是全局變數。因為是示例，所以就沒有判斷瀏覽器類型，低版本IE這么寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) ， 這次實現 progress 和 error 2個事件
error：在請求發生錯誤時觸發。
對應上傳時發生錯誤導致的上傳失敗：uploadFailed()
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
progress：在接收相應期間持續不斷觸發。
對應上傳進度方法：onprogress()
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最後就是上傳方法了，注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。
//上傳文件
function uploadFile() {
//將上傳的多個文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//監聽事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//發送文件和表單自定義參數
xhr.open("POST", "upload");
//記得加入上傳數據formData
xhr.send(formData);
}
❸ 使用js向伺服器上傳文件
（1）js無法向網站伺服器傳送文件只能用FTP傳送文件，（2）是動態網站要用js代碼函數與伺服器資料庫代碼建立連接函數。對應資料庫，數據，相應單位，通過指定路徑傳輸倒是制定數據單位。例如照片imag數據單位格式標注照片。通過編輯代碼任意網路客戶端都可上傳到資料庫imag格式單位標注中.相片.
❹ js 大文件分片上傳處理如何實現
推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,php示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
❺ js中上傳文件中的選擇按鈕為什麼總消失
你這個雖然能做是能做 但是不簡單。
點擊某個按鈕 彈出file框到很簡單
如
function a() {
document.getElementById('ff').click();
}
<div onclick="a()">bbbb</div>
<input type="file" id="ff" />
這個代碼就可以實現
但是 雖然點擊別處 激活 file 的點擊事件 彈出了選擇要上傳的操作框
但是 你選擇某個圖片之後 點擊上傳之後 你會發現 沒有任何資源被上傳
一般瀏覽器都會拒絕 除了正常途徑以外的 其他任何方式給file 賦值 說是為了安全。
要屏蔽這種限制的話 只能在網路或谷歌里 瘋狂搜索了。
我之前為了想模擬 file 因為他太難看 最後還是沒解決。只好用了第三方插件
flash 上傳的 ~ 建議你還是別在這里下功夫了 ~ 跟我一樣會白費功夫
❻ 如何從js文件上傳問題，怎麼解決
1
第一步：新建HTML文件
使用dreamweaver CS6新建一個html文件並保存到桌面，在桌面放一個文件（圖片或文本文檔），上傳測試用。如圖：
❼ js文件上傳選擇文件後如何把文件名稱返顯
打開出現問題的目錄，比如D盤下的文件夾名稱/文字不能顯示，就打開D盤。
後退至上一個文件夾，即不能顯示名稱的文件夾位置，只能通過「後退」按鈕，不能點擊地址欄上該文件夾的位置（鍵盤快捷鍵未測試）。
❽ 如何在角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"',