javascript上傳文件

Ⅰ 原生js實現文件上傳

function saveUser() {

            var file = document.getElementById("file").files[0];

            //原生ajax實現文件上傳

            var formData = new FormData();

            if (file) {

                formData.append("file", file);

                console.log(file)

            }

            //得到xhr對象

            var xhr = null;

            if (XMLHttpRequest) {

                xhr = new XMLHttpRequest();

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true);//設置提交方式，url，非同步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data");

            xhr.onload = function () {

                var data = xhr.responseText;    //得到返回值

                console.log(data);

            }

            xhr.send(formData);

        }

Ⅱ javascript 上傳文件到阿里雲的oss，上傳文件成功後怎麼獲取文件的真實路徑

如果你直接使用 javascript 將阿里雲的accessId、accessKey寫在頁面上是不安全的，你可以使用後台存儲這些敏感的信息，官網有相關的SDK ，你可以選擇你常用的。

在後台編寫你的回調函數，將回調函數憑證信息返回給前端，前端使用回調函數憑證訪問OSS，就可以獲取到回調函數信息。

Ⅲ JS-超大文件上傳-如何上傳文件-大文件上傳

可以試試這樣

1. 前端通過 input type = "file" 接收文件
   

2. 然後使用文件的 slice 的方法對文件進行分片

3. 將每一片提交到後台依次提交到後台，提交時通過 formData 提交，添加幾個欄位

   (1). 這次上傳文件的惟一 id

   (2). 上傳的狀態，是開始，還是上傳中，還是上傳結束

   (3). 分片的位置，比如是第一片，第二片

   (4). 分片的數據

4. 後端當接收到一個文件 id 的結束標識時，把對應的分片按位置數據拼接起來就行
   

Ⅳ 使用js向伺服器上傳文件

（1）js無法向網站伺服器傳送文件只能用ftp傳送文件，（2）是動態網站要用js代碼函數與伺服器資料庫代碼建立連接函數。對應資料庫，數據，相應單位，通過指定路徑傳輸倒是制定數據單位。例如照片imag數據單位格式標注照片。通過編輯代碼任意網路客戶端都可上傳到資料庫imag格式單位標注中.相片.

Ⅳ 如何用javascript實現<img>控制項的圖片上傳

fileupload(前台id：fleupld)控制項加一個onclick方法：getvalue()
{document.getelementbyid("label的id").innerhtml=document.getelementbyid("fleupld").value;}
document.getelementbyid("fleupld").value
獲取的是fileupload中文件的全路徑，當然你可以截取這個值，獲得其子字元串（單個文件的名稱）。

Ⅵ 如何使用javascript限制文件上傳大小

$("#ms_upload_file").change(function(){

//檢驗非空和文件大小
if($(this).val() !== '' && checkSize(this)) { //其他操作
}
});/**
* 函數：檢查上傳文件大小
* 輸入：input的js對象
* 輸出：
**/function checkSize(input) {
var Sys = {}; var flag; var filesize = 0; //判斷瀏覽器種類
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie=true;
} if (navigator.userAgent.indexOf("Firefox")>0) {
Sys.firefox=true;
} //獲取文件大小
if (Sys.firefox) {
filesize = input.files[0].size;
} else if (Sys.ie){ var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//獲取上傳文件的對象
var file = fileobject.GetFile (input.value);//獲取上傳的文件
filesize = file.Size;//文件大小
} //判斷是否符合要求
if (filesize / (1024 * 1024) < 5 ) {
flag = true;
} else {
alert("附件過大，建議不要超過5M！");
flag = false;
} return flag;
}

Ⅶ 前端上傳文件的幾種方法

1.表單上傳

最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。

form表單上傳

表單上傳需要注意以下幾點：

(1).提供form表單，method必須是post。

(2).form表單的enctype必須是multipart/form-data。

javascript學習交流群：453833554

enctype 屬性規定在發送到伺服器之前應該如何對表單數據進行編碼。默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼。HTML表單如何打包數據文件是由enctype這個屬性決定的。enctype有以下幾種取值：

application/x-www-form-urlencoded：在發送前編碼所有字元(默認)(空格被編碼為』+』，特殊字元被編碼為ASCII十六進制字元)。

multipart/form-data：不對字元編碼。在使用包含文件上傳控制項的表單時，必須使用該值。

text/plain：空格轉換為 「+」 加號，但不對特殊字元編碼。

默認enctype=application/x-www-form-urlencoded，所以表單的內容會按URL規則編碼，然後根據表單的提交方法：

method=』get』 編碼後的表單內容附加在請求連接後，

method=』post』 編碼後的表單內容作為post請求的正文內容。

Ⅷ JavaScript文件分片上傳,斷點續傳如何實現

public class FileInf {

public FileInf(){}
public String id="";
public String pid="";
public String pidRoot="";
/** * 表示當前項是否是一個文件夾項。 */
public boolean fdTask=false;
// /// 是否是文件夾中的子文件 /// </summary>
public boolean fdChild=false;
/** * 用戶ID。與第三方系統整合使用。 */
public int uid=0;
/** * 文件在本地電腦中的名稱 */
public String nameLoc="";
/** * 文件在伺服器中的名稱。 */
public String nameSvr="";
/** * 文件在本地電腦中的完整路徑。示例：D:\Soft\QQ2012.exe */
public String pathLoc="";
/** * 文件在伺服器中的完整路徑。示例：F:\\ftp\\uer\\md5.exe */
public String pathSvr="";
/** * 文件在伺服器中的相對路徑。示例：/www/web/upload/md5.exe */
public String pathRel="";
/** * 文件MD5 */
public String md5="";
/** * 數字化的文件長度。以位元組為單位，示例：120125 */
public long lenLoc=0;
/** * 格式化的文件尺寸。示例：10.03MB */
public String sizeLoc="";
/** * 文件續傳位置。 */
public long offset=0;
/** * 已上傳大小。以位元組為單位 */
public long lenSvr=0;
/** * 已上傳百分比。示例：10% */
public String perSvr="0%";
public boolean complete=false;
public Date PostedTime = new Date();
public boolean deleted=false;
/** * 是否已經掃描完畢，提供給大型文件夾使用，大型文件夾上傳完畢後開始掃描。 */
public boolean scaned=false;
}

Ⅸ 如何在角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"',

Ⅹ JavaScript 大文件分片上傳處理如何實現

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>upload</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="file" name="file" id="file"> <button id="upload" onClick="upload()">upload</button> <script type="text/javascript"> var bytesPerPiece = 1024 * 1024; // 每個文件切片大小定為1MB . var totalPieces; //發送請求 function upload() { var blob = document.getElementById("file").files[0]; var start = 0; var end; var index = 0; var filesize = blob.size; var filename = blob.name; //計算文件切片總數 totalPieces = Math.ceil(filesize / bytesPerPiece); while(start < filesize) { end = start + bytesPerPiece; if(end > filesize) { end = filesize; } var chunk = blob.slice(start,end);//切割文件 var sliceIndex= blob.name + index; var formData = new FormData(); formData.append("file", chunk, filename); $.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { }); start = end; index++; } } </script> </body> </html>